In some devices the collapsed navbar items are not being displayed correctly.
The are like this:
and should be like this:
Navbar code:
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div>
</div>
Since I cannot comment on questions yet, I want to share my thoughts this way:
What devices (meaning which screen sizes) are you talking about? Without any CSS it is hard to say why you see this behavior. Can you provide a working sample?
Maybe that helps you:
Changing the collapsed mobile navbar breakpoint
The navbar collapses
into its vertical mobile view when the viewport is narrower than
#grid-float-breakpoint, and expands into its horizontal non-mobile
view when the viewport is at least #grid-float-breakpoint in width.
Adjust this variable in the Less source to control when the navbar
collapses/expands. The default value is 768px (the smallest "small" or
"tablet" screen).
from http://getbootstrap.com/components/#navbar-default
Have you checked out the grid system and its media queries of bootstrap in general? (http://getbootstrap.com/css/#grid-media-queries)
Related
first time posting to StackOverflow and new developer, so please go easy on me :-)
I am using bootstrap to make a navbar on my site and am having an issue with the collapse dropdown menu.
Desktop screenshot As this is my first post, images are not allowed to be embedded.
As you can see, I have the logos nicely aligned on the right-hand side of the navbar.
My problems is that when viewed on a mobile screen/ smaller screen, the icons look messy when vertically stacked.Smaller viewing port screenshot
Ideally, I would like the icons to stay on one line in a way that does not jeopardize the overall style of how they look in full desktop mode.
Here is my HTML code, all using Bootstrap, no CSS have been altered:
`
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="600">
<div class="container-fluid" id="navbarText">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="zara"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" id="nav-options">
<li>About</li>
<li>Tools</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-envelope"></span>
</li>
<li><a><span class="fa fa-phone"></span></a>
</li>
<li><span class="fa fa-linkedin"></span>
</li>
<li><span class="fa fa-github"></span></li>
</ul>
</div>
</div>
</div>
</nav>
`
Thank you very much for any help.
URL TO TEST SITE: enter link description here
I have just attempted to upgrade to bootstrap 4 (alpha 6)
It seems that I am having the opposite issue of most people, in that my .navbar is not collapsed as expected on the initial page load in desktop view. Rather it appears as a horizontal list which pushes the .navbar element to take up about a third of the desktop view. However the .navbar will not uncollapse in mobile view.
Here is the navbar html render:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Marvel Adventures
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>About Us
</li>
<li>Guides
</li>
<li>Surveys
</li>
<li>Monkee
</li>
<li>Characters
</li>
<li>Contact
</li>
<li>Modal
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</div>
I have done the following so far in an attempt to resolve the issue:
used chrome to inspect the navbar.
checked to make sure all stylesheets are loading.
checked that all javascript are loading
check that jQuery is loading
a. googled for possible solutions.
b. checked stack over flow for possible solutions.
I've just upgraded to bootstrap 4. I have looked on stackOverflow and googled in attempts to find a resolve to my issue, but i have as yet to find one.
I am building a travel website with Bootstrap Studio -> http://stackoverflowquestion.bss.design/
It's going well so far, except for one issue: when reducing the screen size, while the logo does decrease in size, it takes up the whole navbar and pushes the burger menu down.
Now, my initial instinct is to remove img-responsive and manually enter #media queries in the CSS so that the image is the perfect size for every screen type. However I'm pretty sure that this is not the best or most efficient way of solving the issue.
Here is my nav HTML:
<nav class="navbar navbar-default navbar-fixed-top navbar-fixed-top transparent">
<div class="container-fluid">
<div class="navbar-header">
<img src="Logo_SmallCompass.png" height="100px" class="img-responsive" id="logo" />
<button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" id="right-links">
<li role="presentation">hello </li>
<li role="presentation">test </li>
<li role="presentation">bye </li>
<li role="presentation">about </li>
<li role="presentation">Contact </li>
</ul>
</div>
</div>
Any help or advice is greatly appreciated!
Many thanks in advance
Just add 1 media query like this:
#media (max-width: 600px) {
a.navbar-brand.navbar-link {
width: 80%;
}
}
This will make sure that the hamburger will stay at the top right.
The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.
This is what it looks like:
As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.
Here is the HTML for the navbar:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?
Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:
.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
top:30px;
}
Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.