I am creating a theme with Bootstrap and I would like my top menu to have:
about, home, contact etc., and another icon for messages. (you can check this image)
But when the page is viewed on mobile I would like the menu to collapse as in this image
But only the messages icon to be still visible.
Currently it is not, any ideas how I can do that?
Wrap the image icon with .visible-xs class example:
<img class="visible-xs" src="...">
Here is the link for more information:
Responsive utilities
Related
My blog is https://www.firozemistry.com based on the Blogger SOHO theme (with custom domain).
On smaller screens like Mobile or iPad, the Hamburger menu appears on top left in the Header. On large Desktop/Laptop screens the Hamburger menu disappears and, instead, the open Sidebar appears on the left side of the screen (instead of the Hamburger menu).
I would like the Hamburger menu to always show on large Desktop/Laptop screens. I do not want the sidebar to show, and instead would like the sidebar items to show only when the Hamburger menu is clicked on.
I would be grateful if someone would show me how to achieve this, either via CSS, or by modifying the HTML. Thank you.
I have found the answer, it is quite simple. In Blogger editor, go to Theme > Customise > Advanced > Widths and set the Content Margin value to 600.(default value is 117). Now even on the largest screens the Sidebar will not appear unless the Hamburger icon is clicked on.
By editing some css you can make this change.
At first remove this css.
Remove media query on this class and make it global like the image
Remove this mark down class
Hope it will work.
Based on 1st response - if you cant get to the Width option from the Customization page - edit the html as follows:
FROM:
<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px" value="117px"/>
TO:
<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px" value="600px"/>
I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
I am using bootstrap with my wordpress site , its perfect when we uploaded to live server but when we hover over/ click nav item in mobile this is what happens
right now if i click on any of the nav items its not clicked and bottom one comes just right to upper one , now i don't remember if i modified some css for navigation code while doing this site but what i expect a single css rule will make it fine can someone help me to fix this ?
In hover and click some css get overrides which is applied for desktop version.
You have to override desktop version css with media query for mobiles.
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I am trying to fix a Facebook Like button to a particular position on top of a header image on WordPress, but am having trouble with the CSS styling (and potentially id's vs classes)
On this website, I want to place a Like button below the 'Join us Now' text in the blue section of the image header image.
I tried to create a seperate div class and position it, but my knowledge of fixed/absolute/relative is pretty shoddy, to say the least. It did an absolute position, but it doesn't stay with the image when I resize the browse window. (We're targeting young students for our campaign, and so a lot will be visiting our sites from small laptop screens and smartphones, so has to be responsive)
Does anyone have any idea how I can do this?
Thanks :)
Edit the layout of your HTML elements so that your like button is positioned below your main image link like this:
<div id="header-banner" style="width:100%;height:300px;">
<a href="http://www.w4u.org.uk/">
<img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
</a>
<div class="fb-like"></div>
</div>
Once that's in place adjust the CSS for the like button by adding this to your inline style that's already in place:
top: -98px;
Here's an image of what it should look like after you make the changes: