position Logo in the middle in NavBar - html

I am Struggling to position the logo in the middle of navbar , and having elements spreading out from the logo on the left and right. I also want to push the buttons in the end of the nav bar.
this is the ideal positioning
In my code, i tried to create two column inside the nav bar. with one taking up 80% width which stores 5 elements, and the other taking up 20% width for the buttons at the end. I am not sure which is the best way to do this.
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<ul class=" col-sm-10 navbar-nav justify-content-center">
<li class="nav-item">Products</li>
<li class="nav-item">My Products</li>
<li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
<li class="nav-item">About KLion</li>
<li class="nav-item">News & Updates</li>
</ul>
<ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">
<button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
</button>
<button type="button" class="btn">
<img src="../../assets/shopping-cart#2x.png" alt="logo" style="width:20px; height:20px;">
</button>
</ul>
</nav>
.navbar-nav > li{
margin-left: 130px;
}

I hope this will help you
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Products</li>
<li class="">My Products</li>
<li><img src="your_img_path" alt="logo" style="width:70px; height:50px;"></li>
<li class="">About KLion</li>
<li class="">News & Updates</li>
<li class="navbar-right"><button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px; ">
</button></li>
<li class="navbar-right" style="margin-right: 20px;"><button type="button" class="btn">
<img src="../../assets/shopping-cart#2x.png" alt="logo" style="width:20px; height:20px;">
</button></li>
</ul>
</div>
</nav>
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Thanks

.navbar{
display:flex;
flex-direction:row;
justify-content:space-evenly;
width:100%;
}
.navbar ul:first-child{
margin-left:20%;
display:flex;
flex-direction:row;
justify-content:space-between;
width:60%;
}
.navbar ul:last-child{
width:20%;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
https://codepen.io/infasyskey/pen/jOEojEQ

You can try this, if you are expecting something similar and position it in the appropriate tag inside the style block using margin and adjust the button size using padding.
<html>
<head></head>
<style>
.navbar-nav > a{
margin-left: 50px;
}
img{
margin-left: 50px;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<div class=" col-sm-10 navbar-nav justify-content-center">
Products</li>
My Products</li>
<img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
About KLion</li>
News & Updates</li>
<button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
</button>
<button type="button" class="btn">
<img src="../../assets/shopping-cart#2x.png" alt="logo" style="width:20px; height:20px;">
</button>
</div>
</nav>
</body>
</html>

Related

Align image inside a navbar div

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.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 class="navbar-brand">
<div> <img src="images/logo.png" /></div>
<h1><span>SUJALA WELLNESS</span> </h1>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">KYK India</li>
<li role="presentation">Health Benefits</li>
<li role="presentation">Certifications</li>
<li role="presentation">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
How do i resize the logo? I want it in same dimensions as navbar. click here to open image
I want the logo to be inside the nav bar and the company's name beside it. How do I align the image and the text. It's ok if the content overlaps the div tag.
I refactored your code a little bit and tried to do it with flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.navbar {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid gray;
padding: 10px;
}
.navbar__left,
.navbar__right,
.navbar__list {
display: flex;
flex-direction: row;
align-items: center;
}
.navbar__logo {
width: 150px;
height: 100px;
}
.navbar__title {
margin-left: 10px;
}
.navbar__list-item {
list-style: none;
margin-right: 20px;
}
<nav class="navbar">
<div class="navbar__left">
<img class="navbar__logo" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="logo">
<span class="navbar__title">My Company</span>
</div>
<div class="navbar__right">
<ul class="navbar__list" role="tablist">
<li class="navbar__list-item" role="presentation">Home</li>
<li class="navbar__list-item" role="presentation">KYK India</li>
<li class="navbar__list-item" role="presentation">Health Benefits</li>
<li class="navbar__list-item" role="presentation">Certifications</li>
<li class="navbar__list-item" role="presentation">Contact</li>
</ul>
</div>
</nav>
<div class="navbar-brand">
<span><img src="images/logo.png"/></span>
SUJALA WELLNES
</div>
If necessary, set a height: ...px; on .navbar-brand img in your stylesheet. Don't use <h1> because h tags default to inline-block and thus start on a new line

Overlapping profile picture in the middle

Currently i have the following Header(Template from Bootstrap for Responsive Purposes):-
But it's not very nice to have a such big navigation pane, so now i want to place the Profile Picture in the middle of the Border like this(The circle should be the profile picture):-
The question is, how can I achieve this without using a absolute position which would ruin my responsive design? (It should be a proportion of 50/50)
Edit: The HTML Code for the Profile Picture is:-
<div id="nav_profile">
<div class="profile_picture">
<img src="assets/img/profilepicture.png" alt="Profile Picture">
<figcaption><i class="ion-android-add"></i></figcaption>
<a id="profile_hover_txt" href="profile.php">View Profile</a>
</div>
</div>
The CSS Part is just for the transitions and the styling for the Picture.
Try The Following Code....
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<a class="navbar-brand brand" href="#">Custom Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <img width="50px" height="50px" class="img-circle" src="http://i.imgur.com/bQ6Rroe.jpg" alt=""></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You can simply set the height of the picture to 200%. The float: right; and width: 100px; are just in my code so it works without an image but the principal works without them.
#menu {
width: 100%;
height: 50px;
background: #000000;
}
#pic {
float: right;
width: 100px;
height: 200%;
background: yellow;
}
<div id="menu">
<div id="pic"></div>
</div>

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 HTML fit alert into navbar

This is probably a simple CSS trick. I need an alert to fit inside the navbar after the home icon between the other icons which are pull-right.
The alert needs to fit inside the spot given.
Examples:
Desktop
Mobile
Current appearance:
CSS that affects the navbar:
.navbar {
margin-bottom: 0;
background-color: #396B99;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #396B99 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Current navbar HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div 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>
<a class="navbar-brand" href="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<!-- Where the alert should go? -->
<div class="alert alert-info">
<strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<li>products</li>
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>
Hope this helps, threw together a quick bootstrap menu with an alert in it
.alert-float{
height: auto;
max-width: 500px;
top: 0;
margin: 0 auto;
}
/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Test
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You just need to tweak the CSS stylign to get it to fit where you want. Mainly the display appearance should be inline-block.
After that, you might want to set max-widths so it doesn't spill over to the nav. Some media queries might be needed also.
Or try floating it left, and see what that looks like.
Can you make a JSFiddle?
JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.
<li>Alert!</li>
Example of JavaScript:
$("#alert").hide();
var error == false;
if (error == true){
$("#alert").show();
}
You can add the alert where you put your comment, using the navbar-text class
You can see it here in action
<nav class="navbar navbar-default navbar-fixed-top">
<div 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>
<a class="navbar-brand" href="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<p class="navbar-text">Put you alert HERE with class navbar-text</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<!--<li>PORTFOLIO</li>-->
<li>products</li>
<!--<li class="dropdown">
<a class="dropbtn" data-toggle="dropdown" href="">
products
<span class="caret"></span>
</a>
<ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
<li>CPR-Web</li>
<li>SC-Tracker</li>
<li>Page 1-3</li>
</ul>
</li>-->
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>

unwanted space between navigation bar and div(red color)

I am getting an unwanted space like this between red color div and header
my html is i've give 0 value for margin and padding for html and body.But still there's a problem please help
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
and css is i've also tried giving 0 padding and margins for div and header
body,html {
margin:0;
padding:0;
}
header{
margin:0;
padding:0;
}
.frontpage{
background:red;
height:200px;
margin:0;
padding:0;
}
.ghi{
background:blue;
height:220px;
}
use it
.navbar{
margin-bottom: 0!important;
}
body,html {}
header{}
.frontpage{
background:red;
height:200px;
}
.ghi{
background:blue;
height:220px;
}
.navbar{
margin-bottom: 0!important;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<header>
<nav role="navigation" class="navbar navbar-fixed navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Example
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-ul">
<li id="tech" class="nav-list"> home</li>
<li id="politics" class="nav-list"> careers</li>
<li id="crime" class="nav-list"> about</li>
<li id="business" class="nav-list"> contact</li>
</ul>
</div>
</nav>
</header>
<section class="frontpage">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
<section class="ghi">
<div class="container">
<div class="row">
<div class="col-md-5">
</div>
</div>
</div>
</section>
It is because the Browser is adding default margins to the ul Elements. Add this style to your css and it should fix the issue:
ul.nav { margin-bottom: 0 !important; }
Just in case someone else have same problem. I fixed it based on reading https://css-tricks.com/fighting-the-space-between-inline-block-elements/ in my case just added this line margin-bottom: -10px;