Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me.

  .menu, .menu ul {
  list-style: none;
  padding: 0;
  margin: 10;
  max-width: 100%;
  width:100%;
}
.menu {
  height: 58px;
  max-width: 100%;
}

(remaining CSS code)

Here is the HTML code for the menu:

<div class="nav">
  <ul class="menu">

(remaining HTML code)

I've tried various solutions found on Stack Overflow, but unfortunately, they haven't been very helpful in solving my issue.

javascripthtmlcss

Answer №1

On this occasion,

.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    background: -o-linear-gradient(#292929, #252525);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);
    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 180px;
}

Replace the following:

min-width: 180px;

with:

min-width: calc(100%/5);

where 5 represents the number of menu items and should be adjusted according to the menu items.

Answer №2

Apply the style display: flex to the element with class .menu, and set flex: 1 for elements with class .menu li

.menu,
.menu ul {
  list-style: none;
  padding: 0;
  margin: 10;
  max-width: 100%;
  width: 100%;
}

.menu {
  height: 58px;
  max-width: 100%;
  display: flex;
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  background: -o-linear-gradient(#292929, #252525);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);

  border-radius: 5px 0 0;
}

.menu li {
  background: -moz-linear-gradient(#292929, #252525);
  background: -ms-linear-gradient(#292929, #252525);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
  background: -webkit-linear-gradient(#292929, #252525);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  background: -o-linear-gradient(#292929, #252525);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
  background: linear-gradient(#292929, #252525);
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  min-width: 180px;
}

.menu>li {
  display: block;
  float: left;
  position: relative;
}

.menu>li:first-child {
  border-radius: 5px 0 0;
}

.menu a {
  border-left: 3px solid rgba(0, 0, 0, 0);
  color: #808080;
  display: block;
  font-family: 'Lucida Console';
  font-size: 18px;
  line-height: 54px;
  padding: 0 25px;
  text-decoration: none;
  text-transform: uppercase;
  max-width: 100%;
}

.menu li:hover {
  background-color: #1c1c1c;
  background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
  background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
  background: linear-gradient(#1c1c1c, #1b1b1b);
  border-bottom: 2px solid #222222;
  border-top: 2px solid #1B1B1B;
}

.menu li:hover>a {
  border-radius: 5px 0 0 0;
  border-left: 3px solid #C4302B;
  color: #C4302B;
}


/* submenu styles */

.submenu {
  left: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
}

.submenu li {
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition: opacity .4s, -webkit-transform .5s;
  -moz-transition: opacity .4s, -moz-transform .5s;
  -ms-transition: opacity .4s, -ms-transform .5s;
  -o-transition: opacity .4s, -o-transform .5s;
  transition: opacity .4s, transform .5s;
}

.menu .submenu li:hover a {
  border-left: 3px solid #454545;
  border-radius: 0;
  color: #ffffff;
}

.menu>li:hover .submenu,
.menu>li:focus .submenu {
  max-height: 2000px;
  z-index: 10;
}

/* More CSS code here ... */

<div class="nav">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#s2">Certification</a>
      <ul class="submenu">
        <li><a href="#">Submenu a</a></li>
        <li><a href="#">Submenu b</a></li>
        <li><a href="#">Submenu c</a></li>
        <li><a href="#">Submenu d</a></li>
      </ul>
    </li>
    <li class="active"><a href="#s2">Projects</a>
      <ul class="submenu">
        <li><a href="#">Residential</a></li>
        <li><a href="#">Recreational</a></li>
        <li><a href="#">Restaurants</a></li>
        <li><a href="#">Malls</a></li>
      </ul>
    </li>
    <li><a href="#s1">About Us</a>
      <ul class="submenu">
      </ul>
    </li>
    <li><a href="Contact-us.html">Contact Us</a></li>
  </ul>
</div>

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

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...

htmlangulartypescriptevents

Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows: .dropdown{ font-size: 20px; background: white; border:none; position: relative; } While the dropdowns appear fine in Chrome, there seems to be a slight differen ...

htmlioscssiphonesafari

Implementing various event listeners for asynchronous JavaScript and XML requests (

Struggling to iterate through an ajax query and encountering a problem where the i value always defaults to 1. I'm not very well-versed in js so any suggestions on how to tackle this issue or possibly a better approach would be greatly appreciated. Th ...

javascriptajaxiteration

Steps for adding an npm dependency as a peer dependency:

Is there a way in npm to install dependencies as peer-dependencies similar to the yarn option --yarn, rather than manually adding them? For instance: "peerDependencies": { "@angular/core": "^7.0.0" } Update: Further clarifi ...

javascriptnode.jsnpmyarnpkg

Retrieving object key value from an array using Underscore.js

Hey there, I'm facing a challenge where I need to extract the values of wave1 and wave2 from an array using underscore.js. array = [{"id":1,"name":"Monoprix", "pdv":16,"graph":[{"wave1":22,"wave2":11}]} ; I attempted the following: $scope.wave1 = a ...

javascriptangularjsunderscore.js

Using Google Apps Script to upload a text file to Google Drive

It seems like uploading a file should be straightforward. However, I'm struggling with understanding blobs. function createFileUploader() { var app = UiApp.createApplication(); var panel = app.createVerticalPanel().setId('panel'); v ...

javascriptuploadgoogle-apps-scriptblobtext-files

Avoiding server requests in Firefox by refraining from using ajax

I've implemented the following jquery code: $("#tasksViewType").selectBox().change( function (){ var userId = $('#hiddenUserId').val(); var viewTypeId = $("#tasksViewType").val(); $.post('updateViewType& ...

javascriptajaxjquery

Display a div using jQuery when it reaches halfway the height of another div

I have a code snippet that hides the .wp-filter when reaching the bottom of the .wpgb-layout jQuery(window).bind('scroll', function() { if(jQuery(window).scrollTop() >= jQuery('.wpgb-layout').offset().top + jQuery('.w ...

htmljquery

Adjust the horizontal position of the background by +/- X pixels

Is there a way to adjust the background-position by a specific distance, say 20px, from its original position? For example: $(".selector").animate("slow").css("backgroundPosition", "center -=20px"); (Unfortunately, this approach doesn't yield the d ...

javascriptjquery

Is it possible to save the current permissions for a channel or category in Discord.js and then restore them after a certain event occurs?

A Little Background I recently came across a lockdown command on YT that locks down all channels in the guild when you type "!lockdown". This command overwrites channel permissions for specific roles. However, when we unlock the channels, everyone is able ...

javascriptnode.jsdiscorddiscord.js

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Troubleshooting IE Freezing Issue Due to JavaScript Code with .addClass and .removeClass

Need some help troubleshooting why my code is causing IE to crash. After commenting out sections, I discovered that the issue arises when using .addClass and/or .removeClass inside the if conditions: if ( percentExpenses > 50 && percentExpenses ...

javascriptjqueryinternet-explorer

Do AJAX requests make Cross-site scripting attacks more significant?

Currently, I am in the process of developing a React application that utilizes a PHP (Codeigniter) backend. Despite Codeigniter not handling this issue automatically, I have taken it upon myself to delve into the matter. While I comprehend the importance ...

javascriptphpajaxxss

Maintaining the proportions of images in different screen sizes when resizing

I apologize if this question has already been addressed, but I have been unable to find a solution that works for my specific issue. My Gallery consists of a side list of available images in one section, which when clicked changes the image source in anot ...

javascripthtmlcss

Is verifying email and password with jquery possible?

I am currently working on a jQuery form validation project: While the password and username validation are working fine, I am facing issues with email and password confirmation validations. Surprisingly, I have used the same technique for both. If you wa ...

javascriptjqueryhtmlcssvalidation

ng-include does not incorporate a partial view

I am facing an issue with ng-include as this code is not functioning properly and I'm unable to identify the error. <select name="select" id="select" class='input-large' ng-model="selectedbien"> ...

javascriptangularjs

Contrasting images showcasing Headless vs Non Headless settings in Puppeteer

I'm currently attempting to capture a screenshot or PDF of the content available at this URL. When using the option {headless: false}, the screenshot is generated correctly; however, in headless mode, some images do not render in the screenshot (for e ...

javascriptnode.jspuppeteer

What is the method to identify the key responsible for triggering a textbox input event?

Suppose there is a textbox on the webpage: <input id='Sub' type='text'> To capture each time the input changes, you can use the following code: sub = document.getElementById('Sub'); sub.addEventListener('input&a ...

javascriptinputdom-eventskeypress

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Currently in the process of setting up a preact project using preact-cli: npx --version # 7.4.0 npx preact-cli create typescript frontend Upon completion, the following information is provided: ... added 1947 packages, and audited 1948 packages in 31s 12 ...

javascripttypescriptnpmpreactpreact-cli