Question 165767 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Does the WordPress 2021 Theme Nav menubar cover the full page width?

Hi, I am building a website on WordPress using the 2021 theme and stackable plugin. I have built everything but now the problem is the top navigation menu bar. I have written custom CSS code to make it sticky now the problem is that it’s not covering the entire screen. here is the code I wrote.

#masthead{
position:fixed;
width:100%;
z-index: 150;
background:white;

}

Tags:

2

Answers


  1. 0

    Remove width:100%;

    Add

        position: fixed;
    z-index: 150;
    background: white;
    left: 0;
    right: 0;
    max-width: 100%;

    Let me know if it works

    Login or Signup to reply.
  2. 0

    The CSS data type represents a percentage value. It is often used to define a size as relative to an element’s parent object.

    Consider the documentation of what percentage, x%, or 100% (in your case) means in CSS. The width is relative to the parent container so if the parent container is not the full width of the viewport, then putting width: 100% will only fill that parent and not the entire viewport.

    In your case, my first guess would be that the body has a margin as many browsers add in their browser stylesheet. If it’s 8px ‘indented’ on each side, that’s likely the case.

    Here is a reduced reproduction: https://codepen.io/stevefrost/pen/XWMLZpW

    Note how there is 8px space on the left and right which is attributed to the margin on the body added by the browser’s stylesheet.

    If this is not your case, please add a reduced reproduction and we can help further!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search