"Creating a custom navigation bar with full width and navigation corners on both left

I am struggling to make my website's navbar stretch to the edges of the container while maintaining full width. I have added left and right padding to each navigation item, but in smaller laptop resolutions, the items break onto a new line, which is not ideal. Any suggestions on how to achieve this? Thank you 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 .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;
 */
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>

htmlcssbootstrap-4

Answer №1

    .header.headers { padding : 3px }

Using this CSS code should solve the issue

Answer №2

To enhance the appearance of your main navigation, apply flex-grow:1 and justify-content:space-around using flex to the .navigation element.

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*/
}
...
Additionally, for a responsive desktop header design, consider the following HTML structure:
<header class="header desktop--header">
<nav class="menu_navbar">
    <div class="container">
        <div class="menu--navbar-inner">
            <ul class="navigation">
                ...
            </ul>
        </div>
    </div>
</nav>
</header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Column count pseudo class is malfunctioning on Safari browser

Why is the pseudo class with column count not working in the Safari browser? I have captured two screenshots to illustrate this issue. 1. Firefox browser screenshot 2. Safari browser screenshot Upon reviewing the screenshots, it is evident that the fir ...

htmlcssbrowsersafaricolumn-count

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

Experiencing issues with nested jQuery submit functions not triggering

I'm attempting to use AJAX to submit a form once a user has clicked on an image element. HTML <img class="remove_subscription" id="remove_mobile_id_<?php echo get_the_ID(); ?>" src="<?php echo get_bloginfo('template_director ...

jqueryhtmlajaxwordpress

Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html: <div class="container"> <div cla ...

htmlcssbootstrap-4

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

htmlcssresponsive-design

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

implementing jqBarGraph on my webpage

Hey there! I have been trying to add a graph to my HTML page for quite some time now. After doing some research, I discovered that using the jqBarGraph plug-in makes it easier to create the desired graph. Below you will find the code that I have on my webp ...

javascriptjqueryhtml

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

javascripthtmlcsstailwind-css

Preventing Event Propagation in Jquery is Quite a Challenge

I'm feeling a bit perplexed. I have a list of names with checkboxes next to them, and this list is generated dynamically after making a request to the backend. The issue is that every time I click on a checkbox, it immediately becomes unchecked. I no ...

jqueryhtmlstoppropagation

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

javascriptcssvue.jsquasar-framework

Using AngularJS to auto-fill input and textarea fields

In order to test local storage, I created a ToDo list using angularJS. Within my mainController, the following code snippet is present: $scope.saved = localStorage.getItem('todos'); $scope.todos = (localStorage.getItem('todos') !== n ...

javascripthtmlangularjs

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

Attempting to outline the limitations at hand. We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space. I aim for the .container to expand as the space increases, utilizing all available area. ...

css

hyperlink to choose a specific option from a drop-down menu

The challenge I am currently working on involves page1.html <a href="/foo"></a> foo.html <select ng-model="ctrl.listvalues"> <option id="{{item.value}}" ng-repeat="item" in ctrl.availableValues" value="{{item.value}}">item.di ...

javascriptjqueryhtmlangularjs

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

cssangularcss-selectors

Using an ng-repeat directive alongside an if condition in Angular

My website contains a vast array of 30 articles, previously represented by around 300 lines of HTML code, but now condensed to just 10 lines with angularjs. However, certain articles hold special significance and require specific display criteria. Check ou ...

javascripthtmlangularjs

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

javascripthtmlcanvas

Identifying child elements in jQuery with identical IDs

Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...

javascriptjqueryhtml

Selecting multiple objects in FabricJS on mouse click

Can anyone provide suggestions on how to select multiple objects on a canvas with a mouse click? I only want to select objects that overlay the point. From my understanding, the target of the mouse event is always the top-most object. I have tried binding ...

javascripthtmlcanvasfabricjs