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"
Related
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
I added an image to the navbar-brand and scaled to some point and the problem that i am having is that the links on the right get shifted down. Below the brand div. Help me with this please.
Work and About links are shifted down. Image is attached to this link.
My code is shown below:
<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>
<a class="navbar-brand text-center" href="#"><img src="img/logo.png" class="img-responsive" width="20%" height="100%"></a>
</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">Work <span class="sr-only">(current)</span></li>
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
CSS for the same is:
.navbar-default {
height: 80px;
border-radius: 0;
border: 0;
border-bottom: 1px solid lightgray;
background: white;
}
.navbar-default .navbar-nav > li > a,
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 80px;
margin:0;
}
.navbar-form {
margin-top: 22px;
}
#media (max-width:768px) {
.navbar-default {
height: 50px;
}
.navbar-default .navbar-nav > li > a,.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
}
#media (max-width:481px) {
.navbar-default {
height: 50px;
}
.navbar-default .navbar-nav > li > a,.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
}
Please help me with the solution to this.
I have a problem. My border-bottom is too long:
How to do that border-bottom would be as text length?
Here is my HTML:
<div class="navbar-header">
<a href="index.php">
<img src="images/logo.png" alt="Broke">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Share a coupon</li>
<li>Faq</li>
</ul>
</div>
</nav>
CSS:
.navbar {
margin-top: 60px;
border: none;
}
.navbar-default {
border: none;
background-color: #FFF;
}
.navbar-toggle {
margin-top: 25px;
}
.navbar ul li a {
margin-top: 10px;
}
.nav li a {
font-family: Avenira;
color: #676767;
font-size: 24px;
padding: 10px 0 10px 55px;
}
.nav li a:hover {
border-bottom: 4px solid #fe8502;
}
P.S I'm using Bootstrap framework.
Trying to figure out how to do this now for hours... Thanks for help in advance!
padding affects the inner size of an element and the border grows with it, with margin it doesn't.
Update your .nav li a rule to this
.nav li a {
font-family: Avenira;
color: #676767;
font-size: 24px;
padding: 10px 0;
margin-left: 55px;
}
.navbar {
margin-top: 60px;
border: none;
}
.navbar-default {
border: none;
background-color: #FFF;
}
.navbar-toggle {
margin-top: 25px;
}
.navbar ul li a {
margin-top: 10px;
}
.nav li a {
font-family: Avenira;
color: #676767;
font-size: 24px;
padding: 10px 0;
margin-left: 55px;
}
.nav li a:hover {
border-bottom: 4px solid #fe8502;
}
<nav>
<div class="navbar-header">
<a href="index.php">
<img src="images/logo.png" alt="Broke">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Share a coupon
</li>
<li>Faq
</li>
</ul>
</div>
</nav>
Try using margin instead of padding. Check this out for more details.
.nav li a {padding: 10px 0;margin-left: 55px;}
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;
}
}
I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.
The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.
<!--Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/logo.png" />
</div>
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).
I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.
Thanks in advanced, if you would like to see my CSS. I can edit it in too.
http://imgur.com/pXcwav3
.navbar-wrap {
padding: 0;
background-color: #77B69C;
}
.nav {
padding-right: 15px;
}
.navbar-right {
margin-right: 0;
}
.container-fluid>ul {
position: relative;
height: 100%;
margin: auto;
}
.navbar-default .navbar-nav>li>a {
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26;
background-color: #fff;
}
There are multiple ways you can handle this depending on what makes most sense.
1) You could actually use text and adjust it with CSS like in the first
navbar example.
2) You can constrain the image to the navbars default height like in
example 2.
3) And you can adjust the height and line height like in example 3 for an
image that exceeds the height of the navbar.
** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.
I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).
(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.)
#import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);
/**Text CSS**/
.navbar.navbar-wrap {
background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
font-family: 'Hind Vadodara', sans-serif;
font-size: 30px;
color: #000;
letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
#media (min-width: 768px) {
.navbar.navbar-wrap .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap .navbar-brand {
margin-left: 15px;
}
}
/**IMG CSS**/
.navbar.navbar-wrap2 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
height: 50px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap2 {
background: #77B69C;
margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap2 .navbar-right {
margin-right: 15px;
}
}
/**LARGE IMG CSS**/
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
<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-default navbar-wrap 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-nav" 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="#"><span class="fname">James</span> <span class="lname">Wong</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 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-nav2" 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://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav2">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 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-nav3" 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://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav3">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>