Create a CSS menu that spans 100% of the width

I am struggling with making a responsive menu 100% width of the page. I have applied the CSS code below to the "rmm" class, but it is still not achieving the desired full width effect. How can I make the menu stretch 100% across the width of the page?

.rmm {
    display:block;
    position:relative;
    width:100%;
    background:#F36F25;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ffffff;
    text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}

/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}
/* */

.rmm .rmm-main-list li {
    display:inline;
    padding:padding:0px;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}

/* MINIMAL STYLE */

.rmm.minimal a {
    color:#ffffff;
}
.rmm.minimal a:hover {
    background:#666666;
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:95%;
    min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#333333;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
    color:#33333;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}

.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#333333;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #dedede;
    color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}

Here is the HTML:

<div class="rmm" data-menu-style='minimal'>
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>About me</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li> 
            </ul>
        </div>

I attempted to simplify the CSS to just this:

.rmm {
    width:100%;
    background:#F36F25;
    text-align: center;
}

However, the menu still does not cover the entire width as expected and instead aligns to the left.

jqueryhtmlcss

Answer №1

The issue most likely lies with the margins of the html and body elements.

Try including the following code in your CSS:

html, body
{
  margin: 0;
}

Answer №2

Would you mind sharing a screenshot of your menu? It appears that the padding on .rmm ul has not been reset, is this possibly causing the issue..(?)

Answer №3

If the menu you are working with has the CSS property position: relative, it will be positioned in relation to its first ancestor element. In this case, consider using position: absolute for a more precise positioning.

To learn more about the position property and how it works, visit the MDN page dedicated to position.

Another option to consider is using a global reset stylesheet to address any issues related to margin and padding at once.

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

If no image is found within the container, include a default image

I am currently working on this project. My goal is to display a default image if there is no image in the post. The JQuery code I have implemented is: $(function () { $(".post").each(function () { var posthead = $(this).find("h2.post-title") ...

javascriptjqueryhtmlcss

Transition in the background color of a button while the superfish menu gracefully drops down

I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...

jquerycssdrop-down-menufadeinsuperfish

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: https://i.sstatic.net/UoMs ...

cssreactjsmaterial-uiflexboxstyled-components

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

javascriptjqueryhtmlcssbootstrap-4

Customized progress bar for monitoring lengthy JavaScript calculations

I am currently working on a project that involves using javascript with jquery and bootstrap. My main objective is to have a visually appealing progress bar displayed during heavy javascript computation. Despite knowing the exact progress state of the comp ...

javascriptcssprogress-bar

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

I am currently in the process of developing a star rating system within Wordpress and am looking to store the rating data in the Wordpress database. To achieve this, I have saved the star rating PHP code as a template within my Wordpress theme folder. Belo ...

javascriptphphtmlcssajax

Utilize Laravel 7 to establish a connection between Order ID and User ID, allowing you to retrieve

I need to retrieve the user name of the user who created an offer based on the seller's ID. In my database, I have 2 tables: First table User User | | - id | - name And the second table is Orders: Orders | | - id | - seller (User id ...

phphtmllaravel

Extracting data from an HTML table on a website

I need assistance in generating a Python dictionary mapping color names to background colors from this color palette. What is the most effective method to extract the color name strings and corresponding background color hex values? The objective is to cr ...

pythonhtmlbeautifulsoup

Jquery is not substituting the URLtextContent

I am facing a rather simple issue but I just can't seem to figure it out. When running locally, my code is replacing the href without any problems. However, when deploying it on a server, the replacement does not occur. I'm not sure if this is du ...

javascriptjquery

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

I've recently started working with angular development and encountered a challenge with a mat-datepicker. The value of the datepicker is connected to filterDate using [(ngModel)] as an @Input() parameter. I have implemented a handleChange event that e ...

javascripthtmlangulartypescriptdatepicker

Issues arising from the alignment of css in html documents

Can anyone assist with my issue? I am trying to add a header to my webpage, but I'm facing a problem where the order of div declarations determines their placement on the page. The first declared div appears on top, and the second one appears below, r ...

htmlcss

How can I arrange content one on top of the other in Bootstrap 3 for mobile devices?

My issue involves working with bootstrap 3 and wanting the image-two class (along with all its child elements in the else conditional) to stack below the "box" class div containing the "New Image" contents in mobile view. Currently, it's stacking on t ...

htmltwitter-bootstrap-3

Assigning a function to a variable

I am attempting to assign a function to a variable (req): var req; $('#complete-field').bind('keyup', () => { var url = prefixUrl + escape($('#complete-field').val()); req = function() { if (window.XMLHttpRequest) { ...

jquery

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

phphtmlcssgoogle-chromeweb

It seems like encodeURIComponent is appending an extra character to my string

jQuery.ajax() is behaving strangely when escaping my data. For instance, if I make the following request: $.ajax({ url: 'somethingordinary', data: { name: 'Ihave¬aweirdcharacter'; } }); upon inspecting the XHR in ...

javascriptjqueryajaxcharacter-encodingencodeuricomponent

The transparent button sits on top of the placeholder text

My clear button is overlapping the placeholder text: https://i.sstatic.net/yrL67gs0.png Has anyone encountered this issue before? I'm using the bootstrap5 theme for select2. Everything else seems to be working fine. It's just this particular b ...

javascriptjquerybootstrap-modalbootstrap-5jquery-select2

Using media queries in CSS to create responsive designs

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" /&g ...

htmlcssmedia-queries

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

Having trouble importing the image from './image.jpeg'? The module script failed to load because the server responded with a MIME type of "image/jpegerror" instead of JavaScript

I attempted to import an image using: import image from 'image.jpeg'; An error message appeared: Failed to load module script: The server responded with a non-JavaScript MIME type of "image/jpeg". Strict MIME type checking is enforced for mo ...

javascripthtml