The top right fixed nav bar for bootstrap come below the logo when resizing the screen resolution. I uploaded the image on https://www.imageupload.co.uk/image/5bDD
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation" style="border:0; border-radius:0;">
<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" style="padding:2px;" href="index.php"><img src="img/searchimage.png" width="51" height="45" /> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-home fa-2x"></i>
</li>
<li>
AboutUs
</li>
...
...
...
</ul>
</div>
</nav>
Please let me know how to solve this...
Thanks
You need to use media queries to specify a smaller font-size when the screen is smaller. Something like this:
#media (max-width: 900px) {
.navbar-inverse li a {
fonts size: 10px;
}
}
The 900px and 10px are for example purposes so you will have to check out which width and font-size will fix the layout problem.
Also, remove the inline-style padding for your list-item as that is not necessary for aligning the links
Related
Bootstrap newbie question. I am using a variation of ZimSystem's Left-Center-Right Aligned NavBars. I put my Brand on the left.
There are two seemingly related problems.
1) On large screens the fb-like button hangs off the right-hand side of the page.
2) On small screens, the Brand is moved down a couple lines so that the first menu item is concealed by it.
I have tried using absolute positioning in both cases, but that did not resolve the issue.
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</div>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
<li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>. </li>
<li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>. </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
</ul>
</div>
</nav>
CSS
#charset "UTF-8";
/* CSS Document */
html, body{
height:100%;
}
.navbar-default {
background-color:#72c5d5;
border-color: #284449;
z-index: 10;
opacity: 0.9;
}
.nav.navbar-nav.navbar-center li a {
color: #254053;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: #EF3927;
}
Here is the code I used for the fb like positioning that did not work.
#media all and (min-width:768){
.navbar-collapse fb-like{
position:absolute;
right:25;
Seems like this should be a pretty simple fix. But I am perplexed.
Here is the bootply.
Next time put it on jsfiddle.net
Replace your facebook div widget with this and it should do the trick. Your width was awkwardly set. So I changed it to 100% and it formatted properly.
<div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"
... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>
</div>
The problem with the navbar-brand spacing was resolved by moving its placement into div.
See comments below for clarification.
The spacing of the FB-Widget can also be resolved by setting the margins for navbar-right in custom CSS.
.navbar-right{
margin-top: 20px;
margin-right:20px;
}
To improve layout on small screens, move up navbar-brand as so:
<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 navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
</div>
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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 src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
I know this is fairly simple but I got stuck trying to hide the Bootstrap main navbar on screens greater than 768px.
I don't want to hide the <nav> tag. I just want to hide the <div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">...</div>
jsFiddle
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#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>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things affecting your ability to control this style
The style that sets the display:block for the navbar uses !important. You need to override that with your own !important rule
The style you are using has lower specificity than the one that is making it display:block. The style in effect is .navbar-collapse.collapse (two classes specified), whereas yours is simply .custom-menu (only one class).
To remedy both of these you need a rule similar to this:
#media only screen and (min-width : 768px) {
.navbar-collapse.custom-menu {
display: none!important;
}
}
That will cause the menu to be hidden at those sizes.
Demo: http://jsfiddle.net/4jgL2hfy/
Using bootstrap navbar i am not able to make the menu items in collapsed mode become 100%. For some reason there is a margin on one side of the menu items.
Fiddle: http://jsfiddle.net/yudcbv7n/
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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 navbar-header-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<a class="navbar-brand navbar-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
And some CSS:
#media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
.navbar-header-brand-collapsed {
display:none;
}
}
#media (max-width: 767px) {
.navbar-header-brand-collapsed {
display:block;
}
.navbar-brand-collapsed {
display:none;
}
}
The culprit seems to be the .nav-justified class. It seems that it is (confusingly) not meant for use with the navigation bar (.navbar).
If you look at the Bootstrap documentation, it mentions how to use .nav-justified with the class .nav using tabs and pills, but not with .navbar.
I would suggest that you remove the .nav-justified class. That will get your collapsed menu items to take up the full width.
Try this:
FIDDLE DEMO
BOOTPLY DEMO
Use text-center instead of nav-justified
<ul class="nav navbar-nav text-center">
I have a CSS issue that I cannot even begin to get my head around. I have a navbar with the standard collapsed button, that when clicked shows rows of links. I have a CSS media query that stretches the rows and centers the links as so:
http://imageshack.us/a/img89/4940/t678.png
Here is the CSS that does the stretching and centering:
/* when the navbar becomes a button, center and stretch the dropdown links */
#media (max-width: 992px) {
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
width: 100%;
text-align: center;
margin: 0 auto;
}
}
Unfortunately, when you first press the collapsible button to unfold the rows, the text does not appear centered. It takes a full 1000ms (1s) for the text to center align. You can literally watch it go from the far left side of the screen to the center.
This leads me to believe I am doing something wrong with my CSS.
How can I fix this issue?
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 class="img-responsive" src="assets/img/logo.png" >
</a>
</div>
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
I found a solution.
To center the text immediately without delay, change the CSS selector from
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in
to
div.navbar-collapse.navbar-ex1-collapse