I am new to BS4 and I couldn't find a answers on how I go about centering the toggle menu when my website is being used on a mobile devices?
This is an example of what i'm looking to achieve
<body>
<div class="container-fluid">
<nav class="navbar-expand-lg navbar navbar-light">
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span>Menu</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">CONTACT</a>
</li>
<li class="nav-item active">
<a class="btn btn-outline-primary" href="https://spartan-safety-limited.gogecko.com/users/login">TRADE ACCOUNT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--CAROUSEL-->
</body>
CSS
.navbar-toggler {
font-family: 'Open Sans', sans-serif;
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: #FF6600 ;
border: 1px solid transparent;
border-radius: 0;
margin-right: 50px;
text-align: center;
}
.navbar-light .navbar-toggler{
color: #ffffff;
}
To center this navbar on mobile in the same way that the linked website does, you're going to need to set display: block, margin-left: 0, and margin-right: 0 on the .navbar and .navbar-toggler. All of this sits outside of a media query. Then inside of the media query, we want to set these styles back to its full page view.
This will center the overall .navbar in the page and the .navbar-toggler button inside of the .navbar element.
.navbar-toggler {
font-family: 'Open Sans', sans-serif;
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: #FF6600;
border: 1px solid transparent;
border-radius: 0;
margin-right: 50px;
text-align: center;
}
.navbar-light .navbar-toggler {
color: #ffffff;
}
/* New styles */
.navbar {
margin-left: auto;
margin-right: auto;
}
.navbar-toggler {
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar-nav {
list-style-type: none;
padding: 0;
}
#media (min-width: 768px) {
.navbar {
margin-left: 0;
margin-right: auto;
}
.navbar-toggler {
display: inline-block;
margin-left: 0;
margin-right: auto;
}
}
<div class="container-fluid">
<nav class="navbar-expand-lg navbar navbar-light">
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span>Menu</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">CONTACT</a>
</li>
<li class="nav-item active">
<a class="btn btn-outline-primary" href="https://spartan-safety-limited.gogecko.com/users/login">TRADE ACCOUNT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--CAROUSEL-->
Related
I'm so novice I'm not even sure of the terms and definitions.
All was working well, but I clearly broke something.
When I narrow the page completely, it is fine. When I expand completely, it is fine. But a few stages in between, the navbar dropdowns exceed the container and fly out to the right.
I did not alter any of the #media parameter that were prefabbed in this dreamweaver set up.
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
color: #FFCC00!important;
display: block;
padding: 0.5rem 1rem;
}
.nav-link:hover, .nav-link:focus {
color: #33ccff!important;
text-decoration: none;
}
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
.nav-tabs {
border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
color: #6c757d;
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nav-pills .nav-link {
border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
}
.nav-fill .nav-item {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
}
.nav-justified .nav-item {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.navbar .container,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar-custom {
background-color: #0a0a0a;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(243, 203, 4, 1);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #33ccff;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
text-decoration: none;
}
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.custom-toggler .navbar-toggler {
color: rgba(255, 255, 255, 0.5);
border-color: #f3cb06;
background-color: #0A0A0A;
text-align: center
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,6,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/*change toggler color*/
.custom-toggler.navbar-toggler {
border-color: #ffcc00;
text-align: center;
}
/*end change toggler color but I need to change the toggler bg color*/
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
<div class="container-align align-content-center">
<div class="container align-content-center"><img src="images/CDBanner.png" alt="" width="100%" class="img-fluid" lass="img-fluid"/></div>
<div class="container-fluid">
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-sm bg-custom navbar-custom">
<nav class="navbar navbar-expand-lg custom-toggler" style="background-color: rgb(10, 10, 10);">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Posters</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">QI Posters</a> <a class="dropdown-item" href="#">Case Studies Posters</a>
</div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Booklets & Brochures</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"><a class="dropdown-item" href="#">Booklets</a>
<a class="dropdown-item" href="#">Brochures</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logos & Illustrative</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Logos</a> <a class="dropdown-item" href="#">Illustrative</a>
</div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Motion</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Motion 1</a> <a class="dropdown-item" href="#">Motion 2</a>
<a class="dropdown-item" href="#">Motion 3</a>
<a class="dropdown-item" href="#">Motion 4</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Social Media</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Before & After Ads</a> <a class="dropdown-item" href="#">FaceBook & Instragram</a>
<a class="dropdown-item" href="#">YouTube Thumbnails</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Other</a> <a class="dropdown-item" href="#">Web Site and UI</a>
<a class="dropdown-item" href="#">T-Shirts</a></div>
</li>
<li class="nav-item"> </li>
</ul>
</div>
</nav>
</div>
I have been trying to center this navbar. It was centered navigation flying out to rightat one time and I don't know where that went.
But this is not coded the way the bootstrap site advises. I think I'm unwilling to redo it.
navigation expanded beyond container
when hovering over a menu item i am doing an animated underline by creating a pseudo class. but the underline is left to right and I wanted to make the stripe appear from the middle. I don't understand why margin: 0 auto didn't work. If it need, I worked with bootstrap 5 beta2.
<style>
.menu__list {
text-transform: uppercase;
justify-content: space-between;
/*margin-bottom: 36px;*/
}
.menu__item {
position: relative;
}
.menu__item a {
font-family: 'Open Sans', sans-serif;
color: #fff;
}
.menu__item:after {
content: '';
display: block;
margin: 0 auto;
height: 3px;
width: 0;
background: #9a9a9f;
margin: 0 auto;
margin-left: -20%;
position: absolute;
top: 55px;
}
.menu__item:hover:after {
width: 140%;
transition: all 0.5s ease;
}
</style>
<nav class="menu">
<ul class="menu__list d-flex">
<li class="menu__item">
<a href="#main">
Main
</a>
</li>
<li class="menu__item">
<a href="features">
Features
</a>
</li>
<li class="menu__item">
<a href="gallery">
Gallery
</a>
</li>
<li class="menu__item">
<a href="team">
Team
</a>
</li>
<li class="menu__item">
<a href="#">
Contacts
</a>
</li>
</ul>
</nav>
If you want the underline animation for your <a> tags to start from the middle instead of going from left to right. You can utilize the ::before or ::after pseudo elements to create a nice animation that starts from the middle and transitions outwards. Try this out.
.menu__list {
text-transform: uppercase;
/*margin-bottom: 36px;*/
}
ul li {
margin: .75rem auto;
}
.menu__item > a {
position: relative;
color: #000;
text-decoration: none;
}
.menu__item > a:hover {
color: #000;
}
.menu__item > a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.menu__item > a:hover::before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu">
<ul class="menu__list d-flex">
<li class="menu__item">
<a href="#main">
Main
</a>
</li>
<li class="menu__item">
<a href="features">
Features
</a>
</li>
<li class="menu__item">
<a href="gallery">
Gallery
</a>
</li>
<li class="menu__item">
<a href="team">
Team
</a>
</li>
<li class="menu__item">
<a href="#">
Contacts
</a>
</li>
</ul>
</nav>
I am trying to design a nav-bar using flex-box, with bootstrap 4. I have three div and whenever the browser shrinks, the div's header__center and header__right are coming one another line. But I wanted to make them remain in the same line, no matter how small the size of the device.
Now when the device width is 576 to 614 i am getting this problem:
And when the device size is extra small that is <314, there is this problem
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-content: center;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
padding: 0px 20px;
/* REMOVED TOP PADDING */
}
.fas .fa-search {
color: #65676b;
}
.header__left>img {
height: 40px;
}
.header__left {
display: flex;
align-items: center;
}
.header__input {
display: flex;
align-items: center;
background-color: #eff2f5;
padding: 10px;
margin-left: 10px;
border-radius: 999px;
}
.header__input>input {
border: none;
background-color: transparent;
outline-width: 0;
padding-left: 10px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
/*modified css */
.header__center__option {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
margin-bottom: 0;
height: 60px;
}
.header__center__item {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 400;
padding: 0 2vw;
height: 60px;
margin-right: 8px;
box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}
.header__center__item.active,
.header__center__item.active:hover {
color: #1877f2;
/* border-bottom: 1px solid #1877f2;
border-bottom-width: 3px; */
background-color: #f8f9fa;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.header__center__item:hover {
background-color: #e9ebef;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.header_option-link {
flex-direction: column;
height: 52px;
display: flex;
text-decoration: none;
justify-content: center;
color: gray;
}
.header__center__item.active>.header_option-link {
color: #1877f2;
}
.header_option-link:hover {
color: gray;
}
.header__center__item.active {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
right: 2px;
left: 2px;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
margin-right: 8px;
border-bottom-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
border-top-left-radius: 18px;
padding-left: 12px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.header__info__name {
font-size: 0.9375rem;
font-weight: 600;
color: #050505;
margin-top: -4px;
margin-bottom: -4px;
line-height: 1.3333;
}
.header__right {
display: flex;
}
.header__info>span {
margin-left: 10px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__info img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
}
.header__info:hover {
background-color: #e4e6eb;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
<div class="header__items">
<i class="fas fa-envelope-open-text"></i>
</div>
</div>
</nav>
How to make those icons not to come in another line and be responsive to whatever the size the device width is decreased? Any help would be appreciated!
I am thinking to use the media query but stuck on the idea to start on what should be the approach or the techniques to make on that same line.
Remove padding-left: 10px on class header__center__option.
Remove all the class fa-lg on your icons.
Adding below stuff if you want to make it scrollable.
nav.navbar{
...
flex-wrap: nowrap;
overflow: auto;
}
https://jsfiddle.net/290478rf/1/
You just need to move header__left, header__center__option and header__right to one parent.
Change
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
</div>
to
<div>
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
</div>
</div>
Now hide and show header__center__item on respective breakpoints. This will fix both of your problems.
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-content: center;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
padding: 0px 20px;
overflow: hidden;
/* REMOVED TOP PADDING */
}
.fas .fa-search {
color: #65676b;
}
.header__left>img {
height: 40px;
}
.header__left {
display: flex;
align-items: center;
}
.header__input {
display: flex;
align-items: center;
background-color: #eff2f5;
padding: 10px;
margin-left: 10px;
border-radius: 999px;
}
.header__input>input {
border: none;
background-color: transparent;
outline-width: 0;
padding-left: 10px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
/*modified css */
.header__center__option {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
margin-bottom: 0;
height: 60px;
}
.header__center__item {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 400;
padding: 0 2vw;
height: 60px;
margin-right: 8px;
box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}
.header__center__item.active,
.header__center__item.active:hover {
color: #1877f2;
/* border-bottom: 1px solid #1877f2;
border-bottom-width: 3px; */
background-color: #f8f9fa;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.header__center__item:hover {
background-color: #e9ebef;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.header_option-link {
flex-direction: column;
height: 52px;
display: flex;
text-decoration: none;
justify-content: center;
color: gray;
}
.header__center__item.active>.header_option-link {
color: #1877f2;
}
.header_option-link:hover {
color: gray;
}
.header__center__item.active {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
right: 2px;
left: 2px;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
margin-right: 8px;
border-bottom-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
border-top-left-radius: 18px;
padding-left: 12px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.header__info__name {
font-size: 0.9375rem;
font-weight: 600;
color: #050505;
margin-top: -4px;
margin-bottom: -4px;
line-height: 1.3333;
}
.header__right {
display: flex;
}
.header__info>span {
margin-left: 10px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__info img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
}
.header__info:hover {
background-color: #e4e6eb;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
<div class="header__items">
<i class="fas fa-envelope-open-text"></i>
</div>
</div>
</nav>
FRONT END FOR NAVBAR
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<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>
<a class="navbar-brand">
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
<ui>...........</ui>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li>
<a></a>
</li>
</ul>
</ul>
</div>
<br />
</nav>
When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css
#media (max-width:1502px){
.navbar-brand {
height: 80px;
}
.navbar {
background-color: #ccc;
}
.navbar-toggle {
margin-top: 25px;
}
}
IMAGE : IMAGE OF NAVBAR
Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.
You can change the breakpoint that the navbar collapses, additionally you can change the display property of the links so they wrap. This will leave them exposed longer but you'll still need to collapse the nav earlier then normal.
Example I:
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1505px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1504px) and (min-width: 768px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 1504px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example II: Wrapped Links
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1500px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-tall .navbar-nav {
display: table;
float: none;
}
.navbar.navbar-tall .navbar-nav > li {
display: table-cell;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 999px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Maybe this is what you are looking for:
.navbar-brand {
padding: 0px !important;
}
.navbar-brand > img {
height: 100%;
width: auto;
}
#media (min-width:768px) {
.navbar-brand {
padding: 15px 0px 0px 0px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<!--start - only for test pupose-->
<img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">
<!--start - only for test pupose-->
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li><a></a></li>
</ul>
</div>
</div>
</nav>
I want a responsive navbar with 4 links and a brand logo in the middle. I want the navbar centered in the middle of the browser. But I'm having trouble executing that layout.
How can I achieve it?
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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">Navigation ein-/ausblenden</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="images/brand.png" alt="Brand" width="310" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start
</li>
<li>Idee
</li>
<li class="hidden-xs">
<a href="#">
<img src="images/brand.png" alt="Brand" width="310" />
</a>
</li>
<li>Leistungen
</li>
<li>Kontakt
</li>
</ul>
</div>
</div>
</nav>
I hope this will help
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid text-center">
<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">Navigation ein-/ausblenden</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="images/brand.png" alt="Brand" width="310"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start</li>
<li>Idee</li>
<li class="hidden-xs"><img src="images/brand.png" alt="Brand" width="310" /></li>
<li>Leistungen</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</nav>
</div>
I suggest you to don't edit bootstrap styles, use your own class.
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}