Full width nav

Site URL: https://enlightenedeconomy.net/

Hi, 

Can anyone help with code to. extend the navigation bar background across the entire page, but have the navigation text remain in line with the content margin on the right?

https://enlightenedeconomy.net/

the code i am currently using that is making the nav text too far to the right:

/* Fullwidth nav bar color */

nav.Header-nav.Header-nav--primary {

    width: 100% !important;

   background: white !important;

   width: 100vw;

    display: block;

    position: absolute;

    bottom: -2.6vw;

    left: 50%;

    transform: translateX(-50%);

}

thanks 🙂

On 7/16/2021 at 6:05 AM, csmkt said:

Site URL: https://enlightenedeconomy.net/

Hi, 

Can anyone help with code to. extend the navigation bar background across the entire page, but have the navigation text remain in line with the content margin on the right?

https://enlightenedeconomy.net/

the code i am currently using that is making the nav text too far to the right:

/* Fullwidth nav bar color */

nav.Header-nav.Header-nav--primary {

    width: 100% !important;

   background: white !important;

   width: 100vw;

    display: block;

    position: absolute;

    bottom: -2.6vw;

    left: 50%;

    transform: translateX(-50%);

}

thanks 🙂

Try this

nav.Header-nav.Header-nav--primary {
    width: 100% !important;
    background: #fff !important;
    display: block;
    position: absolute;
    bottom: -2.6vw;
    left: 50%;
    transform: translatex(-50%);
    max-width: 1360px !important;
    padding-left: 66px;
    padding-right: 66px;
}

On 7/17/2021 at 4:26 PM, tuanphan said:

Try this

nav.Header-nav.Header-nav--primary {
    width: 100% !important;
    background: #fff !important;
    display: block;
    position: absolute;
    bottom: -2.6vw;
    left: 50%;
    transform: translatex(-50%);
    max-width: 1360px !important;
    padding-left: 66px;
    padding-right: 66px;
}

 

thanks tuanphan, this worked to line up the header with the rest of the content but it made the header background short on the left and right side. It also caused the navigation to move to the bottom of the content pages instead of at the top like it is on the homepage. Do you have another solution that may work. I should note this is also version 7.0.
Thank you for any additional suggestions you may have! 

remove this line

Quote

 max-width: 1360px !important;