Header appearance menu full site width

Referring to the topic Header Appearance, Logo and Menu like current site with Sydney Pro and the note to open a new topic for each issue, I would like to know:

How can i stretch the background of the menu to the full site without stretching the menu items?
And the menu should not get splitted into two lines on smaller screens or windows, it should only be one line with all menu entries.

Here is the current site: https://sophisticated-pictures.com/

Code so far:

@media (min-width: 1025px) {
    #masthead.site-header {
    padding-top: 180px;
    padding-bottom: 0; }

#masthead .col-md-4.col-sm-8 {
margin-bottom: 87px;}}

.site-header.float-header {
background-color: rgba(0,0,0,0);}

#mainnav {
    background: rgba(255,255,255,.8);}

.site-logo {
max-height: 160px;}

#mainnav a {
display: block;
letter-spacing: .5px;
line-height: 2;
padding: 15px 10px;
text-decoration: none;
text-transform: uppercase;}

#mainnav ul li a {
float: none !important;}

#mainnav ul li a:hover {
background: #619aa2;
    color: #2d2d2d;}

Hello,

How can i stretch the background of the menu to the full site without stretching the menu items?

I’m not sure what exactly you want to achieve, can you please provide some explanatory screenshots?

And the menu should not get splitted into two lines on smaller screens or windows, it should only be one line with all menu entries.

I have checked your website and it looks like this issue is already resolved, as far as I can see, isn’t it?

Kind Regards, Roman.
aThemes Support

Hi Roman,
I already tried some code and stretched the menu to full site width with the following code. But I am not sure, if this is a good solution and will work on every screen size. ATM it looks fine. But is there a better option to do is?

#mainnav {
    background: rgba(255,255,255,.8);
width: 170%;
margin-left: -35%;}

The menu thing looks fine too with the code above. But if you make the window smaller, there are several breakpoint when the menu switches to mobile view and at some of them the menu bar is not full width.

Thank you for your help.

Hello,

I already tried some code and stretched the menu to full site width with the following code. But I am not sure, if this is a good solution and will work on every screen size. ATM it looks fine. But is there a better option to do is?

I wouldn’t use the width value of more than 100% and negative margin, I would use this:

#mainnav {
    background-color: rgba(255, 255, 255, 0.8);
}

.header-wrap > .container {
    width: 100%;
    padding: 0;
}

Kind Regards, Roman.
aThemes Support

Thank you Roman - you earned AAA.

Awesome as Always. :wink:

1 Like

You are always welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support