Home > Back-end >  full width navbar with left right corner nav
full width navbar with left right corner nav

Time：10-13

I would like to navbar in a full width for website stretch to the edges of the container both side. I am giving left right padding for each nav item but when I check in small laptop resolution then nav iten breaks the line. It is not working fine so how can I make it stretch to the container size. Thanks in advance!

header.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: #00666a;
}
header.header .main--header-wrap {
    /*border-bottom: 1px solid #bbb*/
}

.header-login-section{
    background-color: #009297;
    padding: 0px 25px 0px 25px;
    position: relative;
    top: 0px;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    display:none;
    }
header.header .main--header-wrap .main--header-main {
    /*padding: 15px 0*/
}
header.header .main--header-wrap .main--header-main ul.social--icons li {
    padding-right: 15px
}
header.header .main--header-wrap .main--header-main ul.social--icons li a {
    font-size: 1.5em;
    color: #fff
}

header.header .main--header-wrap .main--header-main ul.social--icons li a:hover {
    font-size: 1.5em;
    color: #fff;
    border-bottom:1px solid #ffc20e;
    padding-bottom:10px;
}
header.header .main--header-wrap .main--header-main ul.social--icons li:last-child {
    /*padding-right: 0*/
}
header.header .main--header-wrap .main--header-main .moelogo {
    max-width: 170px
}
header.header .main--header-wrap .main--header-main .siilogo {
    max-width: 200px
}
header.header .menu_navbar .menu--navbar-inner {
    padding: 15px 0
}
header.header .menu_navbar .menu--navbar-inner li {
      text-transform: uppercase;
    font-size: 0.5em;
    font-weight: 100;
    position: relative;
    list-style: none;
}
header.header .menu_navbar .menu--navbar-inner li a {
    color: #fff;
    padding: 24px 0;
    margin-right: 25px;
    font-weight: 600;   
    margin-bottom: 15px;
}
header.header .menu_navbar .menu--navbar-inner .navigation li a:hover {
    color: #ffc20e;
}

/*header.header .menu_navbar .menu--navbar-inner .navigation li a:hover {
    border-top:1px solid #ffc20e;
    transition: transform 0.5s ease-in-out 0.5s;
    color:#ffc20e;
}
/*header.header .menu_navbar .menu--navbar-inner .navigation li a:after {    
  background: none repeat scroll 0 0 transparent;
  top: 0;
  content: "";
  display: block;
  height: 1px;
  /*left: 0%;*/
  /*position: absolute;
  background: #ffc20e;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

header.header .menu_navbar .menu--navbar-inner .navigation li a:hover:after { 
  width: 10%; 
  /*left: 0;*/
  color:#ffc20e;
}

header.header .menu_navbar .menu--navbar-inner .navigation li:last-child a {
    margin-right: 0
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down {
    width: max-content;
    display: none;
    position: absolute;
    /*left: -78px;*/
    -webkit-box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
    box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li {
    font-size: .938em;
    margin: 1px 0px 1px 0px;
    background-color: #009297;
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu a:after {
    content: "\e90d";
    font-family: study-india;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu:hover a:after {
    content: "\e90d";
    font-family: study-india;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition:all .5s ease;
    /*content: "";
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: 50;
    margin: 0 auto;
    left: 318px;
    transform: rotate(90deg);*/
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu {
    display: none
}

/*header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: 70px;
    margin: 0 auto;
    left: -23px;
    transform: rotate(90deg);
}*/


header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu li a:after {
    content: none
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu:hover .sub-menu {
    width: 180px;
    top: 0;
    background-color: #009297;
    position: absolute;
    left: 100%;
    -webkit-box-shadow: 0 0 13.5px rgba(34,33,33,.2);
    box-shadow: 0 0 13.5px rgba(34,33,33,.2);
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li a {
    color: #ffffff;
    display: block;
    padding: 10px 20px;
    margin: 0;
    border-bottom:1px solid #039ca1;
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li a:hover {
    color: #ffc20e;
    border-top:none;
    background-color:#028589;
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li:hover .sub-menu {
    display: block
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down:before {
    /*content: "";*/
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: -6px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: -1;    
}

header.header .menu_navbar .menu--navbar-inner .navigation li:hover .dropdown-down {
    display: block;
    top: calc(100%   24px);
    padding: 0px 0;
    cursor: pointer;
}
header.header.header-scrolled {
    background-color: #009297;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
        z-index: 500;
}
header.header.header-scrolled .main--header-wrap {
    display: none
}
header.header.header-scrolled .menu_navbar .menu--navbar-inner .navigation li a, header.header.header-scrolled .sideMenu i {
    color: #ffffff
}
header.header.desktop--header.scrollUp {
    /*-webkit-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    transform: translateY(-150px)*/
}
 header.header .menu_navbar .menu--navbar-inner, header.header .menu_navbar .menu--navbar-inner .navigation {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
header.header .menu_navbar .menu--navbar-inner, header.header .menu_navbar .menu--navbar-inner .navigation {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
 <header class="header desktop--header">
 <nav class="menu_navbar">
    <div class="container">
     <div class="menu--navbar-inner">
         <ul class="navigation">
         <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
           <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
            <li><a href="#">Heading</a>
            <ul class="#">    
              <li><a href="#">Sub Menu</a></li>         
              <li class="has-submenu"><a href="#">Sub Menu</a>
                <ul class="sub-menu">
                  <li><a href="#">Sub Sub Menu</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down" >           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
               <li><a href="#">Sub Menu </a></li>
               <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
           <li><a href="#">Heading</a>
            <ul class="dropdown-down">    
              <li><a href="#">Sub Menu</a></li>         
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
               <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
        </ul>
        
        </div>
      </div>
    </div>
  </nav>
  </header>

CodePudding user response：

    header.header { margin : 0 }

this would do the trick

CodePudding user response：

You can give flex-grow:1 and justify-content:space-around using flex to your main .navigation

header.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: #00666a;
}
header.header .main--header-wrap {
    /*border-bottom: 1px solid #bbb*/
}

.header-login-section{
    background-color: #009297;
    padding: 0px 25px 0px 25px;
    position: relative;
    top: 0px;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    display:none;
    }
header.header .main--header-wrap .main--header-main {
    /*padding: 15px 0*/
}
header.header .main--header-wrap .main--header-main ul.social--icons li {
    padding-right: 15px
}
header.header .main--header-wrap .main--header-main ul.social--icons li a {
    font-size: 1.5em;
    color: #fff
}

header.header .main--header-wrap .main--header-main ul.social--icons li a:hover {
    font-size: 1.5em;
    color: #fff;
    border-bottom:1px solid #ffc20e;
    padding-bottom:10px;
}
header.header .main--header-wrap .main--header-main ul.social--icons li:last-child {
    /*padding-right: 0*/
}
header.header .main--header-wrap .main--header-main .moelogo {
    max-width: 170px
}
header.header .main--header-wrap .main--header-main .siilogo {
    max-width: 200px
}
header.header .menu_navbar .menu--navbar-inner {
    padding: 15px 0
}
header.header .menu_navbar .menu--navbar-inner li {
      text-transform: uppercase;
    font-size: 0.5em;
    font-weight: 100;
    position: relative;
    list-style: none;
}
header.header .menu_navbar .menu--navbar-inner li a {
    color: #fff;
    padding: 24px 0;
    margin-right: 25px;
    font-weight: 600;   
    margin-bottom: 15px;
}
header.header .menu_navbar .menu--navbar-inner .navigation li a:hover {
    color: #ffc20e;
}

/*header.header .menu_navbar .menu--navbar-inner .navigation li a:hover {
    border-top:1px solid #ffc20e;
    transition: transform 0.5s ease-in-out 0.5s;
    color:#ffc20e;
}
/*header.header .menu_navbar .menu--navbar-inner .navigation li a:after {    
  background: none repeat scroll 0 0 transparent;
  top: 0;
  content: "";
  display: block;
  height: 1px;
  /*left: 0%;*/
  /*position: absolute;
  background: #ffc20e;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

header.header .menu_navbar .menu--navbar-inner .navigation li a:hover:after { 
  width: 10%; 
  /*left: 0;*/
  color:#ffc20e;
}

header.header .menu_navbar .menu--navbar-inner .navigation li:last-child a {
    margin-right: 0
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down {
    width: max-content;
    display: none;
    position: absolute;
    /*left: -78px;*/
    -webkit-box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
    box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li {
    font-size: .938em;
    margin: 1px 0px 1px 0px;
    background-color: #009297;
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu a:after {
    content: "\e90d";
    font-family: study-india;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu:hover a:after {
    content: "\e90d";
    font-family: study-india;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition:all .5s ease;
    /*content: "";
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: 50;
    margin: 0 auto;
    left: 318px;
    transform: rotate(90deg);*/
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu {
    display: none
}

/*header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: 70px;
    margin: 0 auto;
    left: -23px;
    transform: rotate(90deg);
}*/


header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu .sub-menu li a:after {
    content: none
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li.has-submenu:hover .sub-menu {
    width: 180px;
    top: 0;
    background-color: #009297;
    position: absolute;
    left: 100%;
    -webkit-box-shadow: 0 0 13.5px rgba(34,33,33,.2);
    box-shadow: 0 0 13.5px rgba(34,33,33,.2);
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li a {
    color: #ffffff;
    display: block;
    padding: 10px 20px;
    margin: 0;
    border-bottom:1px solid #039ca1;
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li a:hover {
    color: #ffc20e;
    border-top:none;
    background-color:#028589;
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li:hover .sub-menu {
    display: block
}
header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down:before {
    /*content: "";*/
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(0,0,0,0);
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
    border-style: solid;
    border-width: 0 15px 15px;
    position: absolute;
    top: -6px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: -1;    
}

header.header .menu_navbar .menu--navbar-inner .navigation li:hover .dropdown-down {
    display: block;
    top: calc(100%   24px);
    padding: 0px 0;
    cursor: pointer;
}
header.header.header-scrolled {
    background-color: #009297;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
        z-index: 500;
}
header.header.header-scrolled .main--header-wrap {
    display: none
}
header.header.header-scrolled .menu_navbar .menu--navbar-inner .navigation li a, header.header.header-scrolled .sideMenu i {
    color: #ffffff
}
header.header.desktop--header.scrollUp {
    /*-webkit-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    transform: translateY(-150px)*/
}
 header.header .menu_navbar .menu--navbar-inner, header.header .menu_navbar .menu--navbar-inner .navigation {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
header.header .menu_navbar .menu--navbar-inner, header.header .menu_navbar .menu--navbar-inner .navigation {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow:1;
    justify-content:space-around;
   
}
 <header class="header desktop--header">
 <nav class="menu_navbar">
    <div class="container">
     <div class="menu--navbar-inner">
         <ul class="navigation">
         <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
           <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
            <li><a href="#">Heading</a>
            <ul class="#">    
              <li><a href="#">Sub Menu</a></li>         
              <li class="has-submenu"><a href="#">Sub Menu</a>
                <ul class="sub-menu">
                  <li><a href="#">Sub Sub Menu</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down" >           
              <li><a href="#">Sub Menu</a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu  </a></li>
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
               <li><a href="#">Sub Menu </a></li>
               <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
           <li><a href="#">Heading</a>
            <ul class="dropdown-down">    
              <li><a href="#">Sub Menu</a></li>         
              <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
          <li><a href="#">Heading</a>
            <ul class="dropdown-down">           
               <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">Sub Menu</a></li>
            </ul>
          </li>
        </ul>
        
        </div>
      </div>
    </div>
  </nav>
  </header>

Page link：https//www.codepudding.com/Backend/150887.html

Prev:How to hide ordered list item's content while keeping the marker via CSS?
Next:Problem with CSS; centering of survey form
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding