I have a question concerning bootstrap navbar. I want the collapse menu that appears on mobile, to also appear on larger devices. Since the code is rather large, I will have to share the codepen:
code link http://codepen.io/diazabdulm/pen/KMaREN
http://codepen.io/diazabdulm/pen/KMaREN
Related
I'm trying to create a list of horizontal tabs that can be selected and the tab content has an additional list of tabs (stacked) that shows the content of those tabs next to them.
I created a bootply here so you can see what I mean.
Whenever resizing down to xs sizes the text in the tabs will overflow for the stacked tabs and for tabs with a dropdown the dropdown options will be disproportional to the size of the tab
Haven't really found a decent way to get around it. What's a way to fix this? Thought about doing media queries but not sure that's the best route to go.
In my bootply I was giving the nested nav stacked tabs (in the tab content) section the class of nav-stacked with a class of col-xs-3. This was causing problems for whatever reason at these smaller screen sizes.
Removing the nav-stacked class and leaving it to be just the regular nav nav-pills class worked and correctly shows since each tab is pushed to be stacked anyways due to the small column size. No text overflow.
What about larger screen sizes if you still want them stacked? I just did a hackish solution and set col-xs-3 col-sm-2 col-md-1 so it still forces the tabs to be stacked.
Updated bootply
There's one spot switching from md-sm (I think) could be xs-sm sizes that the tabs display horizontally again. Easily fixed with a media query.
Is that Bootstrap's problem, or the glyphicons itselves? It's irritating, because I want to use these glyphicons in a large size on mobile phones, and it screws up the horizontal align.
I attached a picture, so you can see what is the problem exactly.
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I'm implementing Foundation 5 on one of my sites. I have the top bar mostly working. However, I want to be able to collapse a set of nav links into a dropdown menu at a certain breakpoint.
Basically, instead of just collapsing from the full nav to the one mobile nav dropdown, I want an intermediate step that first collapses to 2-3 links, and then only on very small screens collapses the rest of the way.
I've been looking around for how to do this and am not finding it in the documentation. Any ideas?
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/