On my web page, I cannot get the navbar dropdown to appear in front of the background image on my iphone 8+. It works on my Samsung J5. I've tried Z-index.
Can anyone help?
#mynavbar {
position: relative;
}
.navbar {
border: none;
background-color: white;
height: 10px;
}
.navbar-collapse, .navbar-toggle {
margin-top: 2.5vh;
}
.nav {
z-index: 999 !important;
background-color: lightgrey;
}
.home_opt {
z-index: 999 !important;
background-color: grey;
}
.contact_opt {
z-index: 999 !important;
background-color: grey;
}
<nav class="navbar navbar-inverse">
<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.php"><img class="img-responsive" src="images/webThemesLogoBlack-smallest.jpg" alt="sydney"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right menu">
<li class="active home_opt">Home</li>
<li class="contact_opt">Contact Us</li>
</ul>
</div>
</div>
</nav>
Try putting the z-index on #mynavbar instead of .nav
Related
I am creating a website using the latest version of bootstrap, I have a menu that when viewed on a mobile device changes to a toggle menu with the 3 little lines the same as a burger menu. I would like to be able to change the color of the lines as my header is white and so are the lines and they cannot be seen. I have google this but have no joy with changing the color.
Code:
.navbar-header, #myNavbar, .container-fluid {
background: #fff;
}
.nav.navbar-nav li a{
color: #66728d;
font-size: 18px;
background: transparent;
}
.navbar-brand img {
width:176px !important;
height:110px !important;
}
.nav.navbar-nav li a:hover {
background: #8d8166;
}
.navbar-header, #myNavbar, .container-fluid img {
padding-top: 0;
padding-bottom:5px;
}
.nav.navbar-nav li a {
color: #66728d;
background: transparent;
}
.navbar-toggle {
color: green;
}
<nav class="navbar navbar-inverse navbar-light bg-faded">
<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="#home">
<img src="images/logo.JPG" alt="Los Angeles">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Specials</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
You can control the color of the 3 bars in the hamburger toggle button using this CSS:
.navbar .navbar-toggle .icon-bar {
background-color: #000;
}
When I view my HTML page on my smartphone, the navbar gets imposed by the 'h2' and 'img' of my 'navbar-collapse'.
I cannot figure out why it is like that. Does anyone have any suggestion?
Here is the html code:
<nav class="navbar navbar-default" id="my-navbar">
<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>
J
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>profile
<li>work
<li>resume
</ul>
</div>
</div>
CSS
.navbar-default {
height: 5em;
background-color: #fff;
border: transparent;
border-radius: 0;
}
nav .navbar-header a {
padding: 0.5em 0 0 1em;
font-size: 3em;
}
#navbar-collapse {
background: #fff;
z-index: 1;
}
.navbar-nav {
padding-top: 0.5em;
float: right;
z-index: 2;
}
.navbar-nav ul {
z-index: 2;
}
Here is the 'img' for a better reference:
You have not closed li. please check by closing. also check by searching the text"Hello i am Justin"
How can I make a bootstrap navbar like that: Navbar
The image should be centered on the navbar.
Here is what I have currently:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a 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>
</a>
<a class="brand" href="index.html">
<img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">
Home
</li>
<li>
Pricing
</li>
<li>
FAQ
</li>
</ul>
</div>
This is the CSS that accompanies the above code:
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
margin-left: 0px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
position: absolute;
width: 50px;
background: #f00;
left: 0px;
top: 0px;
padding: 10px;
}
That's my new code: http://www.bootply.com/gEoN0zJ3e8
How can I make the image centered?
Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).
Working Example:
nav.navbar {
margin-top: 50px;
margin-bottom: 65px;
border: 0;
}
nav.navbar .navbar-collapse {
border: 0;
}
nav.navbar .navbar-brand {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
padding: 0px;
}
nav.navbar .navbar-brand img {
height: 150px;
width: 150px;
margin-left: -50px;
}
#media only screen and (min-width: 768px) {
nav.navbar {
margin-top: 65px;
margin-bottom: 80px;
min-height: 20px;
height: 20px;
}
nav.navbar .navbar-nav > li > a {
font-size: 12px;
padding: 0px 10px;
}
nav.navbar .navbar-brand {
top: -65px;
}
}
#media only screen and (max-width: 767px) {
nav.navbar .navbar-nav {
margin-top: 50px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<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/150x150/b71c1c/fff?text=LOGO">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-info">
Content
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy
.menu-container {
background-color:#000000;
height:40px;
}
.navbar-collapse { padding: 1px 30px;}
.navbar-brand {position:absolute;margin-top:-60px;}
.navbar-collapse {
margin-top: 100px;
margin-left: 120px;
color: #fff;
}
.imgc {margin-top:-2px;}
#nav.affix {
position:fixed;
top:0;
width:100%;
z-index:10
}
#sidebar.affix-top {
position:static
}
#sidebar.affix {
position:fixed;
top:80px
}
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="menu-container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&text=Logo"></a>
<div class="navbar-collapse collapse">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
<header class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" 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>
<nav id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
if i remove
.navbar-default .container:before, .navbar-default .container:after {
display:none
}
in my css
.navbar-default {
background-color: #722872;
border: none;
border-radius: 0;
height: 80px;
}
.navbar-default .container {
display: flex;
flex-wrap: wrap;
align-items:center;
justify-content:space-between;
}
.navbar-default .container:before, .navbar-default .container:after {
display:none
}
.navbar-brand {
height: 80px;
}
.navbar-brand img {
max-height: 50px;
}
nav .navbar-nav li a {
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
padding-top: 10px;
padding-bottom: 10px;
}
I will get this result
instead of
This Result:
I try figure it out but can't find the answer, thank you.
It's because Bootstrap use the pseudo-elements as a clearfix
.container::before, .container::after {
display: table;
content: " ";
}
Unfortunately, when using flexbox instead of floats (which require clearing) these pseudo-elements become flex-children and so are accounted for when laying out the other children in the flexed parent (the container).
The simplest method of overriding the flexy nature is just to tell them to display:none.
.navbar-default {
background-color: #722872;
border: none;
border-radius: 0;
height: 80px;
}
.navbar-default .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar-default .container:before,
.navbar-default .container:after {
display: none;
}
.navbar-brand {
height: 80px;
}
.navbar-brand img {
max-height: 50px;
}
nav .navbar-nav li a {
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
padding-top: 10px;
padding-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50" />
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" 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>
<nav id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span>
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
I'd like to center the brand name inside the navbar between a bunch of links (i.e., 2 links to it's left and 2 to it's right).
The thing is that I want to also make a menu for when the navbar is collapseed and make it like so that the brand WON'T appear in the dropdown list.
https://jsfiddle.net/u471wydy/
UPDATED
Please checkout my solution at CODEPEN
Hope it helps you.
HTML:
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<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>
</div>
<a class="navbar-brand navbar-nav" href="{% url 'chat:index' %}">Chaty</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
</div>
CSS:
.navbar {
border-radius: 0px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}
ul.nav.navbar-nav {
margin: 0;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
ul.nav.navbar-nav {
margin-left: 30px;
margin-right: 30px;
}
}