How can I keep my front page body full width while keeping my menu not full-width?


#1

Hello,

This is my website. Right now the menu stretches the full width of the page, but I want it to have margins that are equal on both sides (Just like the menu and logo on this (The ATHEMES) website!)

I added this custom CSS

    @media (min-width: 1200px) {
       .container {
          width: 100% !important;
       }
    }

    .page .page-wrap .content-wrapper {
        padding: 0 !important;
        background-color: #e8e8e8;
    }

How can I change the website so that I have the menu margins set how I want them?


#2

Hello there,

Try removing your custom CSS code as you’d only need to apply this one:

    .home .page-wrap > .container {
      width: 100% !important;
    }

    .home .elementor-container {
      width: 100% !important;
      max-width: 100% !important;
    }

Regards,
Kharis


#3

Thank you! Is there a way to make the menu not at 100% width? Say a menu of max-width 1200px?


#4

Try adding this CSS code:

    @media only screen and (min-width: 1200px) {
      .site-header .container {
        width: 1200px;
        max-width: 1200px !important;
      }
    }

Regards,
Kharis