Nav Bar Layout sorry for my bad English. I am trying to add a bit space after logo so that logo stays on the left corner and the first nav links pushed on the left side not totally left but a bit more to the right.
I copied the exact same HTML and CSS code.
<nav class="nav navbar-default navbar">
<div class="container">
<div class="nav-header ">
<a class="navbar-brand"><img src="C:\Users\usama\Downloads\logo.jpg" alt=""></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
<li class="navbarp"><i class="fal fa-registered"></i><br><p></p>Admissions</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbarp"><i class="fas fa-user-plus"></i><br><p></p>sign up</li>
<li class="navbarp"><i class="fas fa-sign-in-alt"></i><br><p></p>login</li>
</ul>
</div>
</div>
</div>
Try this (padding is added to the right of the logo):
<a class="navbar-brand" style="padding-right:15px">
<img src="C:\Users\usama\Downloads\logo.jpg" alt="" />
</a>
Or (padding is added to the left of the nav bar):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-left:15px">
Also, check your <li> tags. You currently have:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
Note how the heading "about" is outside of the <p></p> tags.
I suspect you'd want it to be formatted it this way:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><p>About</p></li>
With the word being correctly in the <p></p> tag, you might not need the <br>
Related
I have a navbar that does collapse as it should in mobile view but on the tablet (or ipad pro) there is a break or large padding/gap that breaks the navigation. The testing site is at:
padding or margin bottom occurs in tablet view
I have tried a number of things like adjusting the viewport and adding links to bootstraps transition.js and collapse.js files but that is not working either.
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png" alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1">vacation rentals</li>
<li>kailua activities</li>
<li class="dropdown">
rentals by size<span class="caret black"></span>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li>Two Bedrooms</li>
<li>One Bedrooms</li>
<li>Studios</li>
</ul>
</li><li>contact us </li>
<li>about us</li>
<li class="dropdown">
property management and sales<span class="caret black"></span>
<ul class="dropdown-menu">
<li>Property Management</li>
<li>Buying a Property</li>
<li>Selling a Property</li>
<li class="goleft">home</li>
</li>
</ul>
</div>
</nav>
<!--end nav bar-->
If anyone has any ideas on how to fix this, that would be great. Thanks so much. -Beth
You could try changing the class col-lg-12 by col-md-12 or even col-sm-12.
This should make your navbar adapt better smaller resolutions.
How do I align the content properly to fit inside the border box. If you see the image attached, the content has bit of space on left. I tried removing the container class, played around a lot with margin and padding but nothing has worked. It looks like I haven't applied css(bootstrap) in a proper way and also the nav-bar on zoom is not responsive.
I am not sure what is pushing the content to right. How do I fix this?
Created plunker here: https://plnkr.co/edit/iOMp9w4LjIknj11UkFwz?p=preview
You can use .container-fluid instead of .container. Also use .container-fluid inside .navbar-nav and for this one consider removing its padding:
.navbar .container-fluid {
padding: 0;
}
A complete example:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class="title"><strong>Title</strong>
<br/>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li ui-sref-active="active" class="active"><a ui-sref="phone"><i class="fa fa-phone-square" aria-hidden="true"></i></a></li>
<li style="border-right: #B2B9BA 1px solid;" ui-sref-active="active" class="active"><a ui-sref="message"><i class="fa fa-commenting-o" aria-hidden="true"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active" class="active"><a ui-sref="dialpad"><i class="fa fa-th-large" aria-hidden="true"></i></a></li>
<li ui-sref-active="active" class="active"><a ui-sref="dialpad2"><i class="fa fa-stop" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
My plunker
in your code in header.html you added the class pull-right, just remove it, it has float:right !important
<ul class="nav navbar-nav pull-right">
The following code produces "pills" of unequal width when displayed on small or extra small screens (as defined by twitter bootstrap by default).
<header>
<div id="brand" class="container">
<div class="row">
<div class="col-sm-12">
<h1>Website</h1>
<h2>header</h2>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navs">
<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="navs" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</header>
The first pill seems to be exactly 2 pixels wider than the rest. I would prefer that the pills fill the entire width of the display.
Is this a bug in Bootstrap, or something I can remedy via some simple CSS?
JSFiddle: https://jsfiddle.net/elikmiller/z2og3vq7/
why don't you override bootstrap css with your custom css just add your custom class for example nav-custom and put this css into your custom css file
.nav-custom>li>a {
padding: 10px 10px;
}
fiddle
You should use another class in your html called nav-stacked. I updated your Fiddle you can see here the full example and can see here the relevant HTML part.
<ul class="nav nav-pills nav-stacked nav-justified">
<li class="active">
This one is 2px wider
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
I'm developing a web with Ruby on Rails, using Twitter-Bootstrap and Simple-Navigation gem. The navigation menu works fine on any browser, something like this:
When displaying the web on a mobile device and clicking the nav button, the whole menu is displayed on vertical block, enlarging the size of the header to a max. height than can hold the menu. The problem is that opening any submenú increases the size of the menu, overflowing and hiding the last options, as you can see in the comparison:
Any idea?
The code of nav_menu on the mobile version:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="brand">
<img alt="NRG Consulting logo" src="/assets/nrg-logo.png" title="NRG Consulting">
</div>
<span class="development" id="rails-env"><span>development</span></span>
<div class="container nav-collapse in collapse" style="height: 496px;">
<ul class="nav pull-right align-top">
<li>
<a href="manual_path">
Help
</a>
</li>
<li>
Español <img alt="Switch to English" class="lang" data-locale="en" src="/assets/lang-es.png" title="English">
</li>
</ul>
<ul class="nav pull-right align-bottom">
<li id="home">Home</li>
<li id="formulas">Formulas</li>
<li id="deals">Deals</li>
.
.
.
<li class="active dropdown" id="admin">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li id="subscription">Subscriptions</li>
<li class="divider" id="nav_header"></li>
<li id="historic">Recalculate historic prices</li>
<li class="divider" id="nav_header"></li>
<li id="export">export data</li>
<li id="import_tuple_eod_check">Check data</li>
<li class="divider" id="nav_header"></li>
<li id="alerts">Alert</li>
<li id="product_price_alerts">Price alerts</li>
<li id="import_tuples">Import tuple</li>
<li id="fixing_errors">fixing errors</li>
<li class="divider" id="nav_header"></li><li id="redis">Resque</li>
<li id="copycopter">Translate</li>
<li class="divider" id="nav_header"></li>
<li class="active simple-navigation-active-leaf" id="client">Clients</li>
<li id="user">Users</li>
<li id="user_activities">User activity</li></ul></li>
<li id="user">Users</li>
</ul>
</div>
</div>
</div>
</div>
Collapsed nav menu appears to set a fixed height value when displaying nav menu, preventing the div to enlarging when submenu dropdowns display:
<div class="container nav-collapse in collapse" style="height: 496px;">
Adding this lines to style.css set height property to auto, allowing the div to enlarge when needed, showing the whole menu:
.container.nav-collapse.in.collapse{
height: auto !important;
}
Perhaps there is a cleaner solution, but this worked pretty fine for me, and don't want to change Bootstrap code itself.
A link displaying some usefull info about similar issues.
I use bootstrap and i'm showing a language selection in the header.
Now when i reduce the width, bootstrap is going to put my elements in a mobile selection. (s. screenshot)
Most of the time thats a good thing, but in some cases i want options to stay visible. Fest option on the left side of the mobile menu.
<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
If I make two groups like
<ul class="nav navbar-nav navbar-right">
.. Non collapsable items
</ul>
<div class="collapse navbar-collapse" id="navbar-main">
.. collapsable items
</div>
then the non collapsable items are placed below the menu and not on the left side of it.
Here you go. Sounds like you want to exclude some menu items from the boostrap mobile view. I had similar question, and answer here.
Exclude menu item from the collapse of bootstrap 3 navbar
Reshared*
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News</li>
<li>Shop</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator</li>
<li>Extras</li>
</ul>
</div>
</div>
</nav>
original answer: Exclude menu item from the collapse of bootstrap 3 navbar
In order to remove a menu section from the auto-collapsing feature of Bootstrap, you need to move it outside of the . Something like the following:
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
<ul class="nav navbar-nav navbar-right">
Link
Another Link
</ul>
</div>
</div>
Anything inside the "collapse" div will collapse into the mobile menu. Anything that is not there, like the navbar-brand link in most menus, will not.
Hope that helps.