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.
Related
I have a big transparent logo and i placed it in place of the old logo that came with the theme i downloaded but it doesn't scale according to the navigation bar
I can reduce the size of the logo in photoshop but i feel like that's not the best way to fix this issue
Here's the code i have for the logo
<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div>
How do i fix the logo so it fits inside of my nav bar..
Here's my entire nav bar html
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a>
</div>
<!-- Navmenu -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home.
</li>
<li class="dropdown">
Menus.
<ul class="dropdown-menu" role="menu">
<li>All Day Breakfast</li>
<li>Lunch</li>
<li>Children's Menu</li>
<li>Coffee and Cakes</li>
</ul>
</li>
<li>
Location.
</li>
<li>
Catering.
</li>
<li>
About.
</li>
<li>Contact.</li>
</ul>
</div>
</div>
</nav>
In general, whenever you're playing around with the fitting of an image, these are the four CSS attributes you're looking for.
.img-responsive {
height: auto;
width: auto;
max-height: 72px;
max-width: 250px;
}
In my snippet, we're telling the image to automatically size itself. <img> tags will try to retain aspect ratio unless explicitly instructed otherwise. The two max- attributes dictate the largest dimensions we want. If we upload an image that's 300px wide and 72px tall, for instance, it will end up smaller than our maximum height and at 250px wide.
To vertically center the image, you'll want to do this:
line-height: 72px; /* whatever the fixed height of the bar is */
vertical-align: middle;
If your image is the exact height of the navbar, try using vertical-align: top if that looks off.
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)
I was wondering what does cause the li elements to stack on each other when I use nav-justified.
I ve read there is an issue with IE older versions, but I'm testing it on a new version Chrome.
<div id="header" class="row">
<div id="backgroundImage" class="pagebg"></div>
<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<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 id="collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home</li>
<li>News</li>
<li>Forum</li>
<li>Support</li>
</ul>
</div>
</div>
This is my first actual Bootstrap Website and I know there is still lot to learn.
There was nothing about the issue in Bootstrap Doc.
Could something being overriding it?
I 've read that there is a bug in safari browsers while using nav-justified.
Is it a bad idea to use nav-justified? Should I use css to manipulate the text?
Or is there a simple explanation on why is bugging and stacking everything together?
Thank you in advanced
Remove navbar-nav class from the <ul> element inside
<div id="collapse" class="collapse navbar-collapse">...</div>
If it's set, following CSS rule is applied to your <li> element:
#media (min-width: 768px)
.navbar-nav > li {
float: left;
}
}
The float: left causes that "stack" effect.
According to the documentation Justified
Easily make tabs or pills equal widths of their parent at screens
wider than 768px with .nav-justified. On smaller screens, the nav
links are stacked.
Without further CSS tuning, the nav-justified only works for nav-pills and nav-tabs, try changing navbar-nav to tabs or pills.
see http://jsfiddle.net/x3yz13c5/5/
If you insist using navbar-nav try something like
.navbar-nav > li {
float: none;
}
Similar thread can be seen here How to justify navbar-nav in Bootstrap 3
These dog gone phone manufacturers are making our job harder. The introduction of larger phones is causing Bootstrap RWD to respond as a tablet instead of a phone. This is not a major deal sometimes because the responsiveness did take place but the dropdown menu (hamburger menu) fails to show up and forcing it to open prematurely it's not right either. Then you'll have the same problem with smaller tablets or phones in landscape mode.
Here is what I mean:
This is the way I designed it to look for col-xs-12 and instead I am getting the col-sm-12 to render in the phones as the image further below displays. "So what if the hamburger menu doesn't display", you'll say. The regular menu is still too small in a phone and hard to tap.
here is the code I am using for the header
<header>
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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">MENU</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/banner.png" alt="banner" /></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navigation">
<li class="active">Home</li>
<li>about</li>
<li>testimonials</li>
<li>services</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
Anyone knows how to get around this.
Well, I found the problem folks. I feel like doing a face palm so please, I accept all the "duh" and "doi" you throw my way. lol Here is how to fix it.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head and voila!
:shaking my head:
Ok, So I am creating a website with Bootstrap and I have run into an issue. I have placed an image in the nav bar in the logo and then I go to resize the browser to force mobile layout. When I get to where the image should start re-sizing, it drops below (or above) the menu toggle before re-sizing.
I have even tried adding .img-responsive to it but that is no help.
Here is an image of what I am talking about:
And here is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="LOGO"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
Any help would be appreciated
Thanks.
There are several ways to solve this. You can use media queries to set max-width or percentage width to .navbar-brand.
The clearest solution might be to use CSS3 calc to make it take 100% width minus the space that the menu button is taking (22px width + 20px of padding + 2px of border + 15px of margin = 59px total space). And because your image is pushed down at 390px screen width, your media query should be:
#media (max-width: 390px) {
.navbar-brand {
width: calc(100% - 59px);
}
}
Check the JSFiddle with the result.
My other answer might help you as well.