I'm looking to have the 'non-collapsed' navbar menu overlayed on the `. basically a navigation overtop a large main image. However, when the menu is collapsed, I want it to push all the content from the top of the page. Where the default nav pushes the content from below the navbar.
html
Navbar
<div class="collapse navbar-collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="bg-img" class="container-fluid px-0">
<div id="main-wrap" class="container">
</div>
</div>
css
#bg-img {
background-color: red;
min-height: 75vh;
width: 100%;
}
i have use minus margin to place the navbar inside a div which has a class main..in small screen when i click on the navbar toggler icon it does not look good..because i need to change the margin again...how can i solve this problem without using minus margin?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
<div class="main"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
here is output of my code:
https://codepen.io/Sakhawat5/pen/NzwQJz
--Update--
As I think your question is how to append the navbar class to the main div if the user has scrolled more then 50px. This is what could help you out.
$(document).scroll(function() {
if ($(document).scrollTop() >= 50) {
// user scrolled 50 pixels or more;
// do stuff for example:
$('.navbar').appendTo('.main');
// this will append the navbar to the main div, if you want other styling on the navbar aswell we can do the following:
$('.navbar').addClass('.UserHasScrolled')
// now in you CSS set styling to .UserHasScrolled
} else {
// do things when user has NOT scrolled more then 50px
}
});
Also make sure to include jQuery, this is possible, paste this beneath all other scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To your .UserHasScrolled class you can set something like this:
.UserHasScrolled {
position: absolute;
width: 100%;
top: 0;
}
--First answer--
What you ask for is: #media screen and (max-width 767px) while the screen width has a lower size than 767px you can define an overwriting css style like this:
#media screen and (min-width 767px) {
.navbar {
margin-bottom: -336px;
}
}
But this causes another problem, while the navbar is closed the main class will still have a margin of -336px and that's not what you want I guess.
To keep your navbar on top just set position to fixed:
.navbar {
position: fixed;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
This is your solution:
.top{
height:50px;
background:red;
}
.navbar{
margin-left:20px;
margin-right:20px;
}
.main{
height:1500px;
background:orange;
}
<div class="top"></div>
<div class="wrapper">
<div class="main">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
The changes to your CSS as follows should fix the issue:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: fixed;
}
and if you don't want a fixed nav:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: absolute;
}
Let me know if you have any questions.
Here is the navbar html
<div class="row">
<div class="col-xs-12">
<nav class="navbar" id="nav_menu">
<ul class="nav navbar-nav">
<li class="item">Home</li>
<li class="dropdown item open">
About us
<ul class="dropdown-menu">
<li>People</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
And the problem is the size is restrict to the navbar height, that means the dropdown box can not go beyond the nav bar size. I suspect it is not caused by z-index after checking. It is something related to the overflow, but any element tag need to change?
Thanks for helping
The test link:
http://kotechweb.com/kmk/
<div class="row" style="overflow:visible;"></div>
get rid of
.left_menu_body {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
really don't understand why you did that crazy "hack" on .left_menu_body
Here is my html using bootstrap (I'm sure bootstrap is installed correctly)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
When it displays the three links are being displayed as block elements.
This is because in Bootstrap the css for li is this:
.nav>li {
position: relative;
display: block;
}
But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.
EDIT: Updated the snippit to work as requested (see comments below this answer)
.navbar .container-fluid>.navbar-header {
float: left;
margin-right: 10px;
}
.navbar .navbar-nav {
float: left;
margin: 5px;
}
.nav>li {
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div style="display: inline-block;">
<ul class="nav navbar-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4. The flex layout seems to be columnar by default in my ecosystem as well.
The most direct override for this use case:
.navbar-nav {
flex-direction: row;
}
Just ran into this issue with BS4. Learned I needed to add navbar-expand-lg class to my nav.
<nav class="navbar navbar-expand-lg">
I'm not saying the other answers are incorrect in any way, but all that is really needed to accomplish the original question is this entry in the subtheme's CSS file:
.nav.navbar-nav li {
float: left;
}
It should be noted that the class(s) before the li will vary depending on selections in the Appearance section of the theme and other factors. For example, right out of the box the class would have been .menu.nav li
I was facing the same problem.
Try this:
.navbar-nav {
display: inline-block;
}
.navbar-nav>li {
display: inline-block;
}
It worked for me
If you want like this way check this DEMO
<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_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>
</div>
<div id="top_navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4, the inline navbar can be achieved by adding class "nav-item" on list elements and class "nav-link" on a tags like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class= "nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class= "nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class= "nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
So if your nav class is like that
change lg to sm or if -sm then change into -lg
You can make an inline navbar easily with this custom CSS class:
Css:
.nav.inline-navbar>li{
display: inline-block;
}
Now use it in your Html:
.....
<ul class="nav navbar-nav inline-navbar">
......
</ul>
.....
For a quuick modify, I add style="display: inline" in the below position:
<div class="collapse navbar-collapse" id="navbarSupportContent" style="display: inline">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('single')">One Line Param</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('multi')">Multi Line Param</a>
</li>
</ul>
</div>
just simply add this into your CSS and get the elements in one line
.navbar-nav {
display: inline-block;
}
.navbar-nav li {
display: inline-block;
}
In the snippet below, the highlighted line used to be <div class="nav navbar-nav">. In this case, just removing 'navbar-nav' solved the problem to me.
<nav class="navbar fixed-top" id="homehead">
<img class="navbar-brand" src="" height=50 width=50 alt="">
THIS LINE-> <div class="nav">
<a class="nav-item nav-link" href="">Link1<span
class="sr-only"></span></a>
<a class="nav-item nav-link" href="">Link2</a>
<a class="nav-item nav-link" href="">Link3</a>
<a class="nav-item nav-link" href="">Link4</a>
</div>
I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/