I am trying to put a div above navbar-fixed-top in bootstrap, but for some reason the div with its content does not show. I dont know what else to write here, it is asking for detail all is in a code
here is the code
<div class="nav-top">
<div class="container">
<div class="row">
<div class="col-xs-12">fdjfdl;ffd;fjd; fjd;ffffffffffffffffffff
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<div class="navbar-brand" ><img src="images/logoa.png" alt="need to name it"></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Главная <span class="sr-only">(current)</span></li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
<li class="j">
Обо мне <span class="caret"></span>
<ul class="dropdown-menu">
<li>blu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
remove your navbar-fixed-top class from code then you get some space to show your text.Have fun
Here is JSFiddle:https://jsfiddle.net/arifkarim/uu0n4cyk/3/
I know this is 4 years late but for anyone else stumbling upon this.
The fixed-top has a z-index of 1030, so just set your own element that you wish to be on top to z-index: 1050 (higher than 1030 at least).
Related
I'm trying to setup navigation but I can't get it to work the way I wanted.
How i can customize my navigation wp-bootstrap-navwalkercustomize
my current static code.
<div class="nav-outer clearfix d-flex align-items-center">
<!-- Main Menu -->
<nav class="main-menu navbar-expand-lg">
<div class="navbar-header">
<div class="mobile-logo py-15">
<a href="index.html">
<img src="assets/images/logos/logo.png" alt="Logo" title="Logo">
</a>
</div>
<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>
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="current dropdown">Home
<ul>
<li class="dropdown">MultiPage
<ul>
<li>Page</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
<!-- Main Menu End-->>```
Ok i have this fiddle: https://jsfiddle.net/9jb3Lp4k/ . My problem is that on smaller device when i hover over left side menu my right menu go bellow. Can i fixed that so that i get resizible right content. Any suggestion?
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
<span class="navbar-brand"> <img src="{{asset('/assetsfront/img/night-life.png')}}"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="user-info">
<img src="{{asset('/assetsfront/img/defaultuser.png')}}">
<span class="username">username</span>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Galerija<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-picture-o"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Pregledaj galerije <span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-eye"></span></li>
<li>Dodaj galeriju <span style="font-size:18px;margin-right: 2px;" class="pull-right hidden-xs showopacity fa fa-plus"></span></li>
<li>Izmijeni galeriju<span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-edit"></span></li>
</ul>
</li>
<li >Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-user"></span></li>
</ul>
</div>
</div>
</nav>
You can resolve this issue through the display: flex; css property. wrap the navigation and content with a new div class (.new-class - same as like the below css example) and call the display:flex. Please see the code below.
CSS
.new-class{
display:flex;
}
Please see the updated jsfiddle.
So, want put a navbar-fixed-top in my nav. The proposal is that my nav follow when scrolling page. But the difficulty is that my nav is overlapping the section right below in this case, my carousel slide.
here de jsfiddle
https://jsfiddle.net/fhvo7anz/
<header class="container-fluid">
<div class="container bghead navbar-fixed-top ">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="images/logo.png"><br>
</div>
<div class="col-md-8">
<nav class="navbar navbar-default bgnav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li class="dropdown">
Institucional <span class="caret"></span>
<ul class="dropdown-menu">
<li>Institucional</li>
<li>Missão, Visão e Valores</li>
<li>Organograma</li>
<!--<li role="separator" class="divider"></li>-->
</ul>
</li>
<li>Atividades</li>
<li>Link</li>
<li>Contato</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Procurar">
</div>
<button type="submit" class="btn btn-default">Ir</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
Add this to your CSS:
#carousel-example-generic {
margin-top:150px;
}
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 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">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I am trying to learn bootstrap and so far it has been very fun. I have been stuck on this problem for a while, I want to space my navbar just two fifths of the screen. I think it will look a lot nicer if it is spaced that way but I haven't been able to find a solution. I was wondering if there is any way of doing that.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><strong>Website</strong></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You can create a css class:
.adjust-margins-container{
margin-left: 30%;
}
and then add the class to:
<div class="container-fluid adjust-margins-container">
bootply example