Center logo within nav bar bootstrap - html

I am attempting to center my logo within my navbar, I am using Bootstrap.
When I inspect the element and hover over my a tag that holds the logo I can see a box that is centered horizontally and vertically. However, my logo sits below it for some reason.
Here is a link to the test site.
http://test.envera.co.uk/
And below is my header code.
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="<?php echo get_template_directory_uri(); ?>/img/Envera_Telecom_Logo_Final.png" alt="Logo">
</a>
</div>

Update the logo css to
#logo-header {
max-width: 100%;
max-height: 100%;
}
and from .navbar-brand remove padding

Remove the class navbar-brand from your anchor tag. That will fix the issue.
<a href="index.html">
<img id="logo-header" src="http://test.envera.co.uk/wp-content/themes/html5blank-stable/img/Envera_Telecom_Logo_Final.png" alt="Logo">
</a>

change the css of
.header-v3 .navbar-brand
located in header.css to
.header-v3 .navbar-brand {
z-index: 1;
padding: 0px 10px 10px 10px;
position: relative;
}

Related

Bigger logo without affecting other elements in the navbar

My main problem is with a logo. Below is my header element where I attached my navbar and logo. The Header contains a background image and in it I placed my navbar.
HTML
<div class="header">
<div class="container">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#"><img src="images/logo.svg" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS
.navbar-brand > img {
width: 100%;
}
It looks like this:
image
And when I specify width for the logo (like 20em), it becomes bigger but it moves the li items too. I don't want my li items be affected. Plus I want the logo to be responsive when I specify width it still remains the same in smaller screens.
iamge2
I experimented a lot with logo sizes on bootstrap3 navbar.
For me this works best.
First I give the navbar my desired height, and set the li > a line-height to the same height, so the link padding-top and padding-bottom are fixed (links are vertical centered).
.navbar {
min-height: 100px;
}
ul.navbar-nav > li > a {
line-height: 100px;
}
The navbar now is 100px height. With padding in mind my logo should now have a max-height of 80px cause we need 10px padding-top and 10px for padding-bottom. Lets say the logo has a width of 200px and a height of 80px, I give the img the class logo.
<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>
Now keep the padding in mind, I add 10px of padding-top to the logo.
img.logo {
padding-top: 0px;
width: 200px;
height: auto;
}
If you want different logo sizes, just change the navbar min-height/line-height and change the logo width/padding.
Bootstrap 3 fiddle:
https://jsfiddle.net/yghg5hsx/
Bootstrap 4 fiddle:
https://jsfiddle.net/973Lde7j/3/
put your logo inside a div and the rest of the navbar content in another div
then try this:
#navbar { width:100%}
#logoDiv { width:20% }
#contentDiv { width:80% }

This button does not toggle back in

I am working on this site: http://www.u401769.gluweb.nl/
I have a problem with the toggle menu when you view the site on mobile size. When you toggle it out and back in the cart button keeps being visible.
This is the code for the content that is toggled. The button in the end is the button that does not toggle back in.
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true">
<div class="menu-hoofdmenu-container">
<ul class="social_media">
<li><img src="wp-content/themes/fairphone/img/social_icon_01.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_02.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_03.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_04.png">
</li>
</ul>
<button type="button" class="shopping-cart">
</button>
</div>
and the button that toggles the menu:
<button type="button" class="navbar-toggle menu-toggle" aria-controls="primary-menu" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I hope someone is able to help me. Thank you in advance.
I fixed this with css as following:
first you need to add display:none to the cart button, so its style will be like this :
.shopping-cart {
background-image: url('img/shop_icon.png');
background-repeat: no-repeat;
background-position: center;
margin: 15px;
float: right;
background-color: #00a4de;
border: none;
box-shadow: none;
padding: 12px 25px;
display: none;
}
then we will add style to make it visible when the menu is toggled down :
.main-navigation.toggled .shopping-cart {
display: block;
}
and finally we will add the following style to yours to make the button always visible when the width of screen is bigger than 769px :
#media screen and (min-width: 768px) {
.shopping-cart{
display:block;
}
}

How can I not hide all ul in navbar, under button?

I learn bootstrap and attemp responsive page as apple main page (sorry, I can`t post more two links)
In header all element hiden under button, except for apple and bag.
big header
small header
In small size of page, button is left, apple is center and bag is right.
And under button are all element, except for apple and bag. How can I this result get?
My code:
<header class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="responsive-menu">
<ul class="nav navbar-nav" >
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/mac/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/ipad/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/iphone/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/watch/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/tv/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/music/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/support/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_large.svg"></li>
<li><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></li>
</ul>
</div>
</div>
</header>
and default bootstrap.css
Firstly, change your navbar-header element as follows :
<!-- Add a text-center class to handle centering your Apple logo -->
<div class="navbar-header text-center">
<!-- Add your Apple logo (only seen on extra-small viewports) -->
<a class="navbar-brand visible-xs" href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.svg"></a>
<!-- Add your last "shopping" icon to the right (via pull-right) -->
<a class='pull-right visible-xs' href="#"><img src="http://www.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.svg"></a>
<!-- Add the pull-left style to your button to left-align it -->
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Then add the following styles to adjust those as necessary to your custom CSS :
/* Absolutely center your logo over the header */
.navbar-brand { float: none; position: absolute; top: 0px; width: 100vw; padding: 0}
/* Set the default display option to cause it to be centered */
.navbar-brand img { display: initial; }
/* Add a left margin to your now left-aligned toggle button */
.navbar-toggle.pull-left { margin-left: 10px;}
/* Do the same for your right-aligned shopping link */
a.pull-right { margin-right: 10px;}
Example
You can see an example of this here and demonstrated below :

Flexbox and Bootstrap How to Put Image in Navbar Brand Area

I have a project where I have used a bootstrap navbar but broken it up into flexboxes in order to align the various parts per specification. I want to put a logo in the far left corner of the navbar, where navbar-brand is usually given, but I'm having no luck getting an image to show. The best I can do is get an image placeholder icon to show. Attached is an image of the navbar as it stands now.
The following is the HTML for the navbar:
<div class="container first-container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container navcell flex-navbar">
<div class="navbar-brand">
<!--<a class="navbar-brand" href="#">-->
<img src="images/SST.jpg" class=" navbar-brand sst-image"></img>
<!--</a>-->
</div>
<button class="navitem navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navitem navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navcell navbar-nav">
<li class="active"><span class="navitem glyphicon glyphicon-home"></span> Home</li>
<li><span class="navitem glyphicon glyphicon-edit"></span> Services & Rates</li>
<li><span class="navitem glyphicon glyphicon-book"></span> Portfolio</li>
<li><span class="navitem glyphicon glyphicon-user"></span> About/Contact John</li>
<li><span class="navitem glyphicon glyphicon-log-in"></span> Log In</li>
</ul>
<form class="navcell navbar-form">
<input type="text" class="form-control" placeholder="Search" id="searchinput">
<button type="navbtm submit" class="btn btn-default">
<span class="navitem glyphicon glyphicon-search"></span>
</button>
</input>
</form>
</div><!-- Nav-collapse -->
</div><!-- Container -->
</nav>
</div><!--Container-->
The pertinent .css is
body {
margin-top:50px;
background: url('../images/marble.jpg') no-repeat center top scroll;
}
.container{
width: 100%;
}
.navbar-brand {
background-image: url('../images/SST.jpg') no-repeat;
position: relative;
}
.banner {
font-family: 'atlas_of_the_magiregular', cursive;
font-size: 1.7em;
line-height: 1.3em;
padding: 10px 8px;
margin: 10px 0px;
background-image: url('../images/Sic Semper Scroll.png') no-repeat;
background-position: 50% 50%;
position: relative;
}
I included the banner section in the .css to show how I've implemented the scroll image below the navbar. I've tried setting the brand logo to be an image in the HTML, a background image in the CSS, nothing. I can put text into the navbar-brand and set it's color, but I'm having no luck with my logo image. What can I try next?
The problem seems to be with the relative path you are using for the image.
If you use an image with an absolute URL it works fine. Try this to see what I mean:
<div class="navbar-brand">
<!--<a class="navbar-brand" href="#">-->
<img src="http://i.imgur.com/60PVLis.png" alt="" class="navbar-brand sst-image">
<!--</a>-->
</div>
If you want to use a relative path, you need to make sure it's leading to the folder that contains the image. In your CSS the path is ../images/SST.jpg, but in your HTML the path is images/SST.jpg. You need to find the right path.
As a side note, keep in mind that <img> is a void element. No closing tag is required. You can remove the </img>.

Bootstrap Navheader Safari Weird Layout on First Load

I'm seeing an odd layout in Safari using a bootstrap nav header. This only shows up on first page load sometimes. Refreshing the page gives the correct layout (Opening a fresh window and pasting in the url triggers the incorrect layout fairly consistently.)
Here is a picture of the current layout:
And here's the layout when I reopen the page sometimes:
I want to have the links section on the same line as the brand, positioned to the right.
Here's the relevant html (I've tried to cut it down as much as possible):
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" data-toggle="collapse"
type="button">
<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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<ul class="navbar-nav pull-left" id="path">
<li>
a link
</li>
</ul>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
And the styling:
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
}
#path {
list-style: none;
margin: 0;
padding-top: 16px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
Any thoughts on working around this odd behavior?
This seems like a Safari bug.
I solved it with following:
Absolute position the real logo.
Add a 120px (width of the logo) left margin to the #path
This was complicated by the navbar collapse section, which would shift over the #path into the logo when collapsed. The easiest solution was to wrap the #path in another .navbar-brand class, #path-nav here. Finally, Firefox needs path-nav to use float: none.
Here's the revised working example:
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=
"#collapser" data-toggle="collapse"
type="button">
<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="/" id="brand">
<img src=
"http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
style="height: 40px">
</a>
<div id="path-nav" class="navbar-brand">
<u id="path">
<li>
a link
</li>
</ul>
</div>
</div>
<div id="collapser" class="collapse navbar-collapse">
<a class="navbar-right btn btn-default" id="navbar-login">login</a>
</div>
</div>
</nav>
</header>
.
#brand {
line-height: 50px;
padding: 0 1.2rem;
padding-right: 0;
width: 120px;
position: absolute;
}
#path {
list-style: none;
margin: 0;
margin-left: 120px;
padding-top: 4px;
padding-left: 0;
}
#path li {
float: left;
}
#path li:before {
content: "/";
padding: 0 0.6rem;
}
/* for firefox */
#path-nav {
float: none;
}
Thanks for this question and providing your solution. I added "float: left" to my second tag and it did the trick.
Thanks again.