Bootstrap 3 Navbar menu item alignment - html

Site : http://www.Spotlightdd.co.uk
I have a navbar that has an increased size due to the logo in the middle. The logo has a -margin value to line it up with the bottom border (I know it's out by a few px). What i'm trying to do is move the text down without just increasing the size of the navbar, so it looks more centered in the navbar. Currently, i've tried using margin/padding.line-height, anything i can think of that would only move the text to no avail. If someone could try a hand at sorting it, that would be brilliant.
Thanks
(Navbar html)
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="CompanyLogo" src="img/spotlightLogo.png" style = "height: 80px" >
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-center">
<li> HOME </li>
<li> WEB DESIGN</li>
<li> GRAPHIC DESIGN </li>
<li> SOCIAL MEDIA </li>
<li class = "logo"> <img src = "img/spotlightLogo.png" class = "headerLogo img-responsive" alt = "spotlight" style = "height: 150px;"></li>
<li> PRINTING </li>
<li class="active"> BRANDING </li>
<li> VIDEO PRODUCTION </li>
<li> CONTACT </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
(Navbar CSS)
.navbar-default {
border-bottom: 3px solid #CE1344;
background-image: none;
background-color: white;
}
.navbar .navbar-nav {
text-align: center;
display: inline-block;
float: none;
vertical-align: top;
}
li > a {
margin-top: 0px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.headerLogo {
margin-bottom: -50px;
}
I tried to put in every bit of code relevant. Apologies because the css file is a mess at the moment.

Try adding this to your css:
.navbar-nav>li{
padding: 20px 0;
}
.navbar-nav>li.logo{
padding: 0
};
This should do the trick.

Try this:
.nav-center{
position: relative;
top: 20px;
}
li.logo {
position: relative;
bottom: 22px;
}

Related

Put Image Beside Navbar Bootstrap

Edit #1: Here's a picture of the issue:
Edit #2: Here's a picture after I use the brand class
Edit #3:
I'm trying to float an image beside a navbar. It works until I have the navbar 100% width. Then the navbar goes below the image.
Here's my HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" class="pull-left" src="Images/logo.png">
</a>
</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Internet</li>
<li>Phone</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
And here's my CSS:
.Navlinks {
font-size: 24px;
color: white;
padding-top: 50%;
vertical-align: middle;
}
.Navlinks:hover {
color: white;
}
.Navlinks:focus {
color: white;
}
.navbar-default {
background-color: #00AEFE;
height: 89px;
}
.nav.navbar-nav li a{
color: white;
font-size: 18px;
}
Is there a way to make sure these two can float side by side?
There's an example in official docs:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
https://getbootstrap.com/components/#navbar-brand-image
This answer is based on #Serg Chernata answer
Your logo must be transparent and if it's so bigger than what you want, maybe a css style width or height to <img> tag is needed. something like navbar-brand > img {height: 40px;}
also you should move <button> into <div class="navbar-header"> to right positioning of navbar toggle button in mobile devices.
.Navlinks {
font-size: 24px;
color: white;
padding-top: 50%;
vertical-align: middle;
}
.Navlinks:hover {
color: white;
}
.Navlinks:focus {
color: white;
}
.navbar-default {
background-color: #00AEFE;
height: 89px;
}
.nav.navbar-nav li a {
color: white;
font-size: 18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" class="pull-left" src="Images/logo.png">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Internet
</li>
<li>Phone
</li>
<li>Android TV
</li>
<li>Shaw Direct
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>

Bootstrap Nav logo issue

This should be simple, but I am missing something.
I've added in a new navbar to a bootstrap site, this looks like this
http://codepen.io/davidcochran/pen/Dihnl
However when I actually implement this into my bootstrap site it refuses to center.
<header role="banner" id="logo-main1"><div id="everything">
<img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo">
<nav id="navbar-primary" class="navbar navbar-default" 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="#navbar-primary-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>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" --></div>
CSS
.header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
.navbar-nav {
width: 100%;
text-align: center;
> li {
display: inline-block;
float: none;
> a {
padding-left: 30px;
padding-right: 30px;
}
}
}
}
.logo-main1 {
text-align: center
}
it looks like this:
!!! Link removed until further inspection !!!
Another css deceleration is probably overriding the selector and deceleration (below) which centers your navbar.
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;

Bootstrap navbar-toggle is not at the top

So I have this issue, I'm trying to get the navbar-toggle to get up into the corner but it's over lapping.
I also have a icon in pc view that over lapping which I really like.
Is there a way to fix the navbar-toggle??
My code is below.
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<img class="visible-xs img-rounded pull-right" src="smallicon2.png" alt="" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand page-scroll">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-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>
<img src="icon2.png" class="img-rounded hidden-xs" />
</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="hidden">
</li>
<li>
<a class="page-scroll" href="#">Home</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Thanks for looking.
In bootstrap CSS, Following causing the issue padding: 15px;
.navbar-brand {
float: left;
height: 50px;
padding: 15px;
font-size: 18px;
line-height: 20px;
}
This may fix the issue padding: 0px 15px; but it will effect the logo too
.navbar-brand {
float: left;
height: 50px;
padding: 0px 15px;
font-size: 18px;
line-height: 20px;
}
Fiddle
Proper Fix without effecting the logo, change margin-top: 8px; to margin-top: -5px; to following CSS in bootstrap css file
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: -5px; <<<< Here
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Fiddle
Note: Better approach do not edit bootstrap css, make customstyle.css and add above css with !important rule in custom css.
Don't waste your time with fixing. Copy and paste the complete navbar from Bootstrap navbar. After that, delete HTML you don't need, correctly!
The problem often begins if you want to have a navbar with a bigger logo.
Here is a precise instruction how to create a Bootstrap navbar with a bigger logo.

have some issues with my bootstrap and css

I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.
Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.

How do I align a Logo next to navigation links that are horizontally centered?

I've been struggling the last several hours with positioning my logo just to the right of the centered navigation links in a responsive Navbar. Tried dozens of ways to get this to work without any luck. I left most of the CSS for the Navbar intact; BootStrap 3. Any assistance would be greatly
appreciated! Link to site is:
Many Thanks!
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="indexalt.html">
<img src="data2/test5.png" width="61" height="48">
</a>
<div class="navbar-text"> <span class="FutureFont">Future Youth <span style="color:#ee1b04; font-size: 16px;">R</span>ecords</span>
</div>
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
NEWS
</li>
<li class="dropdown">
ABOUT US
<ul class="dropdown-menu">
<li>Our Team
</li>
<li>Mission
</li>
<li>Contact
</li>
</ul>
</li>
<li>PROJECTS
</li>
<li class="dropdown">
MEDIA
<ul class="dropdown-menu">
<li>Audio
</li>
<li>Video
</li>
<li>Photos
</li>
<li>Enter Download Code
</li>
</ul>
</li>
<li>DONATE
</li>
</ul>
</span>
<div class="sociallinks pull-right">
<a href="">
<img id="aks" src="data2/FB1.png" width="32" height="32">
</a>
<a href="">
<img id="akst" src="data2/Twitter1.png" width="32" height="32">
</a>
<a href="">
<img id="aksy" src="data2/youtube1.png" width="32" height="32">
</a>
</span>
</div>
</div>
<!--/.nav-collapse -->
</div>
</nav>
Your html had unclosed divs, extra divs, wrong classes, and lots of issues. It's best to follow examples on the GetBootstrap.com to the letter and comment and indent your code. When you have a problem that requires getting help, always make an effort to use clean, valid, html with following the documentation.
The .navbar for Bootstrap is very specific, it's left or right and that's it. You have to understand CSS and positioning etc., to change it around. And you also have to be adept at responsive CSS and become very fluent with the Bootstrap CSS as well.
This is not the finished product. The height of the navbar in this situation is dependent on the height of the tallest child, the logo. The logo is 60px tall with 10px padding on the top and bottom, 80px line-height on the first child of the links is used to make it center inside there. Otherwise there would be a lot more CSS to create.
DEMO: https://jsbin.com/tupay/1/
https://jsbin.com/tupay/1/edit?html,css,output
HTML:
<!-- Fixed navbar -->
<nav class="navbar-center navbar-inverse navbar-fixed-top" role="navigation" id="nav">
<div class="container">
<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="logo" href="indexalt.html">
<img src="http://placehold.it/60x60/ffffff/000000&text=LOGO">
</a>
<div id="navbar" class="my-collapse collapse">
<ul class="navbar-center navbar-nav nav">
<li>
NEWS
</li>
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>Our Team
</li>
<li>Mission
</li>
<li>Contact
</li>
</ul>
<!--/.dropdown-menu -->
</li>
<li>PROJECTS</li>
<li class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Audio
</li>
<li>Video
</li>
<li>Photos
</li>
<li>Enter Download Code
</li>
</ul>
<!--/.dropdown-menu -->
</li>
<li>DONATE
</li>
</ul>
<!-- /ul.navbar-center -->
</div>
<!--/.my-collapse collapse -->
<div class="social-links clearfix">
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
</div>
<!--/.social-links -->
</div>
<!--/.container -->
</nav>
<!-- /nav.navbar-center -->
CSS
nav.navbar-center.navbar-inverse {
background: #000
}
.navbar-center .social-links a {
width: 32px;
height: 32px;
float: left;
padding-right: 5px;
}
nav.navbar-center .social-links {
float: left;
padding: 27px 0 10px 0;
}
nav.navbar-center img {
max-width: 100%;
height: auto;
}
nav.navbar-center .logo {
float: left;
padding: 10px 20px 10px 0;
}
.navbar-inverse button.navbar-toggle {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
width: 50px;
height: 80px;
}
.navbar-inverse button.navbar-toggle .icon-bar {
width: 100%;
display: block;
margin: 5px 0;
height: 3px;
border-radius: 0;
background:#fff;
border:0px;
padding: 0;
}
#media (max-width:767px) {
nav.navbar-center .my-collapse {
clear: both;
padding: 10px 0;
}
}
#media (min-width:768px) {
nav.navbar-center img {
width: 100%;
height: auto;
}
nav.navbar-center .container {
text-align: center;
max-width: 980px;
}
#navbar.my-collapse.collapse {
visibility: visible;
display: inline-block;
}
ul.navbar-center > li > a {
padding: 0 15px;
line-height: 80px;
}
nav.navbar-center .logo {
padding: 10px 0 10px 0;
text-align: left;
float: left;
}
nav.navbar-center .social-links {
line-height: 80px;
float: right;
padding: 0;
}
}