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

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

cssborderaccordionmargin

Tips for maintaining a single-line div while adding ellipses:

What is the CSS way to ensure that a div or class contains only one line of text, with ellipses added if it exceeds that limit? I am aware that setting a specific height and using overflow:hidden can achieve this, but it doesn't quite work for my need ...

javascriptcsshtmllayout

Display a confirmation modal before triggering $routeChangeStart in AngularJs, similar to the window.onbeforeunload event

When a user chooses to stay on the page as the route starts to change, the original route remains intact but the form directives are reloaded. This results in the loss of all checkbox and input values, resetting them to their defaults. If a user closes th ...

javascriptangularjsonbeforeunloadngroute

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

Set up npm and package at the main directory of a web application

Currently, I am in the process of developing a web application using node.js. Within my project structure, I have segregated the front-end code into a 'client' folder and all back-end logic into a 'server' folder. My question revolves a ...

javascriptnode.jsnpm

Ways to extract information from a text

I have a massive string, divided into two parts that follow this pattern: {\"Query\":\"blabla"\",\"Subject\":\"gagaga"}", {\"Query\":\"lalala"\",\"Subject\":\"rarara&bso ...

javascriptstring

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

Blend express router by chaining the (.route) method with other HTTP methods like (.get, .post, etc) to create

Here is my code structure: let router = require( 'express' ).Router(); Later on, I define my routes like this: router .route( '/' ) .get( listMiddleware ); router .route( '/:id' ) .get( getOneByIdMiddleware ...

javascriptexpress

What could be causing the form body to return null in a PUT request?

What could be causing the form data to not be stored in req.body? EJS/HTML <form onsubmit="EditJob()" class="editForm"> <div class="form-group-edit"> <label for="position">Position</label> <input type="pos ...

javascriptnode.jsmongodbexpressmongoose

Testing the mongoose.connect callback method in Jest: A step-by-step guide

Currently working on a new Express application and utilizing Jest as the testing framework. All sections of code have been successfully covered, except for the callback of the mongoose.connect method: I attempted to spy on the connect method of the mongo ...

javascriptnode.jsexpressmongoosejestjs

Trouble extracting data with XPath query in Python

Currently, I am attempting to extract specific information from this particular webpage. However, there are three crucial pieces of data that have proven to be quite elusive. Firstly, I am struggling to retrieve the grade, denoted by '5.6' next ...

jquerypythonhtmlcssxpath

Responsive design

Is it possible to change the background-color of the h1 element when the browser ratio is 4:3? I've attempted using the aspect-ratio property in my media query, but it doesn't seem to be working. Any suggestions on how to resolve this issue? Che ...

cssmedia-queriesaspect-ratio

Singularize button/solo in the center

How can I make this button align perfectly center on both PC and Mobile as a container? I have attempted the following CSS and HTML code: <section id="jour"> <div class="container"> <button class="btn1">Jeudi 12</button> ...

htmlcss

Attempting to retrieve the value of "id" using a "for...of" loop

I am seeking assistance with my auditTime function. In the loop using "for . . of", each element of the div HTML collection with the class name "time-block" should be iterated through, and the number value of that div's id should be assigned to the va ...

javascripthtmljquerycss

Create a PDF document with pdfkit and stream it to the browser in a Node.js Express application

I am currently using pdfkit to create a PDF file and I would like to send this PDF directly to the browser. However, I am encountering an error message stating "TypeError: listener must be a function", Additionally, the file is being generated in m ...

javascriptnode.jsexpressnode-pdfkit

What is the best way to navigate my Page while my Dialog Component is displayed?

Is there a way to enable scrolling on the background when a dialog component opens up? By default, scrolling is disabled when the dialog appears. How can we allow scrolling in the background? Here is the code snippet: import React, { useState } from &apos ...

cssreactjsmaterial-uimaterial-designstyled-components

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

javascriptjqueryhtmlcss

Experiencing Strange Issues with Jquery Image Carousel... Assistance Needed!

I recently created a jquery slideshow using a tutorial I found at this link: While the slideshow is functioning correctly for the most part, there is a strange issue that occurs right at the beginning when displaying the first image. Initially, the first ...

javascriptjquerysliderslideshow

Ways to modify the default text in a dropdown menu?

I'm currently attempting to modify the title of a dropdown using the Multi-select plugin found here. However, I've encountered an issue where I am unable to dynamically change the text (Dropdown title) of the dropdown using JavaScript. $(' ...

javascriptjquerybootstrap-4bootstrap-multiselect

Error encountered when assigning a value to a session array in PHP 7.0

I am the author of this script <?php session_start(); if($_POST["num"] > $_SESSION["ratings"][$_POST["title"]]) $SESSION["ratings"][$_POST["title"]] = $_POST["num"]; ?> Although my syntax seems correct to me, the IDE is showin ...

phphtmlarraysif-statementsession-cookies