When I try aligning my logo, it is aligning under the rest of the navigation bar, and under the links? Is there anyway to fix this?
I guess is there a way to get the logo inside of the navigation bar, to the left of the links, but inline with them?
body {
background-color: #ece8e5;
padding: 0;
margin: 0;
font-family: 'Monda', sans-serif;
}
.navbar {
height: 80px;
background-color: black;
padding-top: 16px;
}
.navbar a {
font-size: 26px;
padding-left: 30px !important;
padding-right: 30px !important;
}
.nav {
float: right;
}
.aboutHeader {
text-align: center;
}
.aboutHeader h2 {
padding-bottom: 20px;
}
.aboutHeader p {
font-size: 22px;
}
.footer {
height: auto;
width: 100%;
background-color: black;
padding-bottom: 0;
margin-bottom: 0;
}
.footer p {
padding: 0;
margin: 0;
}
.footer li {
display: inline-block;
padding-left: 100px;
}
.logoImage {
height: 250px;
width: 275px;
padding-top: 0;
float: left;
}
<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" 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>
<img src="assets/images/logo.png" class="logoImage">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Related
I want to create a navbar over an tranparent background but when I create navbar it also gets the properties of background image. Can anyone please help me solve this problem?
This is the HTML for the Menu:
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" style="padding-left: 50px; margin-top: 5%">
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"> HOME</li>
<li> SERVICES</li>
<li> ABOUT</li>
<li> TESTIMONIALS</li>
<li> CONTACT</li>
</ul>
</div>
</nav>
</section>
And here is the CSS:
.navbar {
background:transparent;
background-image:none;
border-color:transparent;
box-shadow:none;
}
.active {
background-color: white;
}
{
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container-fluid {
position: relative;
padding-left: 0px;
}
.container-fluid img {
vertical-align: middle;
}
.container-fluid .content {
position: absolute;
bottom: 0;
background: rgba(0,178,170,0.5); /* Black background with transparency */
color: #f1f1f1;
width: 100%;
padding: 20px;
height: 500px;
}
Please use navbar-light or navbar-dark so the link colors work against the contrast of the background image or color
somewhat like this:
<nav class="navbar navbar-light transparent">
or
<nav class="navbar navbar-dark transparent">
The best way to use background-image with background overlay.
.image {
background-color: #490d40;
background: url(https://sonorangirl.github.io/Earth-Quotes/img/google-earth-view-South-Iceland3.jpg)
no-repeat center center;
background-size: cover;
height: 200px;
position: relative;
}
.image:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(51, 23, 14, 0.6);
}
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-nav > li > a {
color: white;
padding: 10px 20px;
margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #000;
color: #fff;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Link</li>
<li>Another Link</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="image"></div>
</body>
demo
I've added a class header to the section element which contains the nav-bar and added this style:
.header { position: relative; z-index: 2; }
The header will position itself on top of the background.
Example: https://jsfiddle.net/y817zo62/
I try to design a centered logo navigation but i have some output problems
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 50px;
}
}
/////
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>
Also, demo at http://codepen.io/anon/pen/egqxjW
What is the problem that is causing that white space?
PS: Is there a better way to get the same result? What should i do to include the logo only once in the source code?
right: -50%; moved the ul 50% to the right of where it should be. Its width stay the same (100% of the container), and it's moved by 50% to the right, so 50% of the ul is outside of the container, bleeding out of screen.
I made some change to achieve the same result you want, using text-align: center and display: inline-block instead. They are marked with /* change */ in the CSS.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
ul.navbar-nav {
position: relative;
float: none;
/* change */
text-align: center;
/* change */
}
ul.navbar-nav>li {
position: relative;
display: inline-block;
/* change */
vertical-align: middle;
float: none;
}
ul.navbar-nav>li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav>li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav>li a {
padding: 0 50px;
}
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs">
<img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" />
</li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>
You have in your style a rule which is setting right: -50% on the navbar. Unfortunately, since the UL navbar displays as a block you wind up with an element that is 100% moving to the right 50% and winding up offscreen.
Instead of messing with right relative positioning you should try the navbar-right bootstrap class. Like so:
<ul class="nav navbar-nav navbar-right">
Most of the layouts from bootstrap play with floats, so you can't just use relative positioning expecting it to behave the same way.
Lastly you should compare it with the official documentation responsive navbar example here: https://getbootstrap.com/components/#navbar
You can see the resulting example here: http://codepen.io/anon/pen/NdQJRb
Can someone help me center the links on my nav bar please. I have been trying for the last 45 minutes.
Every time I use display: flex and justify-content: center it works until the hamburger button appears and is clicked on and then it all floats to the left.
Any help would be massively appreciated.
Thank you
Reece
.navbar {
background-color: #000;
justify-content: center;
height: auto;
font-family: Gill Sans, Verdana;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
nav li:hover {
background-color: #C00;
margin: 0;
}
<nav>
<div class="navbar-container">
<!--NAVBAR CONTAINER START -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<strong>HOME</strong>
</li>
<li>
<strong>MEET THE BAND</strong>
</li>
<li>
<strong>PHOTOS</strong>
</li>
<li>
<strong>VIDEOS</strong>
</li>
<li>
<strong>GET IN TOUCH</strong>
</li>
</ul>
</div>
</div>
<!-- NAVBAR CONTAINER END -->
</nav>
Check out this pen http://codepen.io/Danstan/pen/ENajRb the links will be at the center
ul.nav.navbar-nav {
display: table;
margin: 0 auto;
float: none !important;
}
.navbar {
background-color: #000;
height: auto;
font-family: Gill Sans, Verdana;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
text-align:center;
}
.navbar .navbar-header {
display:table;
width:auto;
margin:auto;
}
nav li:hover {
background-color: #C00;
margin: 0;
}
Try this:-
/* Center Nav Bar */
#nav ul {
text-align: center;
}
link:-http://themes.typepad.com/guide/2011/12/navbar-center.html
I have achieved in making my navbar somewhat centered however it doesn't seem to be very resoponsive friendly. Also, when I collapse the menu my hamburger menu doesn't appear. Any tips would be great!
.navbar-header {
height: 90px;
}
.navbar li {
display: inline;
padding-top: 20px;
float: center;
text-align: center;
}
.navbar {
background: #003643;
}
.navbar li a, .navbar .navbar-brand {
color: #ABD7DE !important;
font-size: 20px;
font-family: 'Lobster', cursive;
text-aline: center;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #284047 !important;
background-color: #ABD7DE !important;
}
#logo {
max-height:150px;
border: none;
border-radius: 50%;
margin-top: -5px;
margin-left: 15px;
}
#nav .navbar-header{
max-width: 900px;
margin-left: 322px;
margin-right: auto;
}
.jumbotron {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
height: 700px;
repeat: none;
font-family: 'Lobster', cursive;
color: black;
margin-bottom: 0px;
text-shadow: 1px 1px black;
}
.button-primary {
background: #B1DBDF;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 20px;
}
<nav class="navbar navbar-fixed-top">
<div id="nav" class="container">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<div class="container">
<div style="margin-top:180px" class="row">
<h1>Welcome to my Portfolio!</h1>
<h3>I'm so glad you stopped by!</h3>
<button class="button-primary">Let's get started!</button>
</div>
</div>
</div>
.navbar-header {
height: 90px;
}
.navbar li {
display: inline;
padding-top: 20px;
float: center;
text-align: center;
}
.navbar {
background: #003643;
}
.navbar li a, .navbar .navbar-brand {
color: #ABD7DE !important;
font-size: 20px;
font-family: 'Lobster', cursive;
text-aline: center;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #284047 !important;
background-color: #ABD7DE !important;
}
#logo {
max-height:150px;
border: none;
border-radius: 50%;
margin-top: -5px;
margin-left: 15px;
}
#nav .navbar-header{
max-width: 900px;
margin-left: 322px;
margin-right: auto;
}
.jumbotron {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
height: 700px;
repeat: none;
font-family: 'Lobster', cursive;
color: black;
margin-bottom: 0px;
text-shadow: 1px 1px black;
}
.button-primary {
background: #B1DBDF;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 20px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">
<div id="nav" class="container ">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<div class="container">
<div style="margin-top:180px" class="row">
<h1>Welcome to my Portfolio!</h1>
<h3>I'm so glad you stopped by!</h3>
<button class="button-primary">Let's get started!</button>
</div>
</div>
</div>
I am trying to make my navigation bar stay in the same position even after resizing the window. It continues to move on resize and therefore the Navigation Bar and Nav brand are not aligned the way I want:
HTML:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div>
<div class="navbar-header">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Our Prices</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 20px;
padding-right: 20px;
}
.navbar-nav li:hover {
background-color: #3c3c3c;
}
.navbar-nav {
color:red;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}