"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

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

javascriptjquerycsstailwind-cssdropdown

Vuetify's v-badge showcasing an exceptionally large number in style

Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge. Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-ta ...

javascripthtmlcssvue.jsvuetify.js

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...

htmlwordpresscss

Is there a way to determine whether my CSS style modifications will impact other web pages?

Managing a team of junior developers has its challenges, especially when they unknowingly make CSS style changes that impact multiple pages on our website. Is there a tool or method available to alert them that modifying the color of a specific class will ...

css

Show a div once all its content has been fully loaded

I have a section on my webpage that includes images, text, and links. It functions as a carousel. My goal is to show the section only after all content has loaded. I am looking to transition from opacity 0 to opacity 1 with a fade-in effect. Here is the ...

jqueryimagehtmldocument-ready

Guidance on creating a custom color selection tool for a specific task

Looking for assistance in converting a code snippet that uses <button> elements to select colors into a color picker. I am unsure how to retrieve the selected color and use it within a JavaScript function. Can someone provide guidance on this? Here i ...

javascripthtmlcolor-picker

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

phphtmlcssdatetime

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom

How to align 3 buttons in a div using CSS

My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image). What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times? It ...

htmlcss

Error: Grunt bake file include is unable to access the specified file

In the root directory, I have an index.html file that I am working with. Upon running grunt, I encountered the following error: Verifying property bake.my_target exists in config...OK Files: index.html -> dist/index.html Options: content="content.j ...

htmlnpmgruntjs

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

data not being transferred successfully to the SQL input from forms

The data from this input form is not being properly transferred to the SQL database when using the sqlAddUser.php file available at pastebin.com/W9BH0D3s. The form includes the following fields: <form action="sqlAddUser.php" method="post"> <div c ...

phphtmlmysqlforms

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

javascripthtmlunit-testingtypescript

Information extracted from the database without considering any line breaks

When data is stored in my MySQL database, the line breaks of the text input are preserved. However, when retrieving the data, the line breaks disappear and everything is displayed as one continuous string without any <br> tags. Any insights into why ...

phpmysqlhtml

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...

javascripthtmlcssvideozooming

Is there a way to prevent the letters from moving when I hover over them?

What occurs when the numbers are hovered over: https://gyazo.com/20b6426d435551c5ee238241d3f96b4d Whenever I hover over the pagination numbers, they shift to the right, and I am unsure of what mistake I made in my code that's causing this. Below, I ...

javascripthtmljquerycss

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking