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.
Related
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.
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.
Here is the fiddle to see issue.
https://jsfiddle.net/nn6ydqcw/1/
<header>
<nav class="navbar navbar-inverse" role="navigation ">
<div class="col-md-12" style="height:150px;background-color:#FFFFFF">
<div class="col-md-3" ><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></div>
<div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div>
</div>
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</header>
I am using Bootstrap 3 in above code and it works fine on desktop / laptop etc. But when I see it in mobile or resized browser to see in smaller screen, it is displaying in following sequence. So problem is that in smaller screen when I click on toggle icon then navigation buttons overlaps tag line.
Logo
Navigation Toggle Icon
Text based Tag line
I want to do so they display in following sequence. So even when I see them in smaller screen, navigation buttons should not overlap tag line.
Logo
Text based Tag line
Toggle Navigation Toggle Icon
Please let me know how can I get required result.
Update your code as follows:
CSS:
#media only screen and (max-width: 768px) {
body {
background-color: orange; //FOR TESTING PURPOSE
}
#tagstyle {
position: relative;
left: 220px;
top: -200px;
padding: 0px;
width: 60%;
}
}
HTML: [Add an id as shown below]
<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1>
Desktop View:
Mobile View:
Check the style="height:150px;background-color:#FFFFFF" you're having conflict in the height:150px; And I think you need to use the push and pull in bootstrap.
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%