Full width layout for graphics/backgrounds with fixed max width for menu/content

patrickfoster

What I'm trying to achieve is basically a full-width layout up to a certain width in pixels. If the screen is greater than 1440px, I'd like the menu and all content to be boxed to 1440px, while continuing to stretch backgrounds/sliders to full width. I've set Site Width under Global-General-Layout to 1440px and Responsive is enabled, but the Header (Transparent, Full Width unchecked, Boxed Sticky Header checked), Content, and Footer all continue to expand to the edge regardless of how wide the window is. Is there a quick fix for this I'm missing? When I try to tweak the CSS with max-width, it generally pulls things in from the right leaving a blank space.

Thanks!

Phil

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Also, please, check if you do not have enabled Full width option enabled on your page options.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

patrickfoster

Thank you, that worked! I'm seeing another issue now with the header on breakpoints/sizing.

Here's a link to the site: https://bit.ly/3pi7LVl

When the browser width goes less than this width (1223px acc. to chrome):

to this width (1222px):

there is some sort of object or padding between the logo and the menu that is forcing the menu to go to a second line and the logo indents from the left. I would like the menu to get closer than this to the logo before flipping to the menu button, and not have this 2nd line behavior at any width.

When the width moves down to 947px, it switches to the menu button, but the button is not right-aligned:

Then at 942px, the logo indents from the left and the menu button indents even further from the right:

At 750px and under, it resizes the logo and the menu button returns to the right:

I believe these pixel numbers may be short by a few in Chrome with the scroll bar, but that's what I have to go on.

Here are my settings for Responsive:

Menu & Action Bar:

and Header:

I'm using the built-in transparent header because I couldn't replicate this look in the header builder.

Thanks for your help!

Phil

It seems to be a problem with Betheme. We will take a closer look at it and try to fix it, but for now, please, use the following CSS code:

@media only screen and (min-width: 960px) and (max-width: 1239px){
 #Top_bar .top_bar_left {
   width:unset!important;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px){
 #Top_bar .top_bar_left {
   width:100%!important;
}
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

patrickfoster

I appreciate you checking into this. FYI, here's what it looks like with that CSS between 1239-960px:

There's also a glitch that only seems to occur if you refresh the page while scrolled down into the sticky menu area, which is not a common user behavior but thought I would pass it on:

The header gets bumped down from the top, which appears to get added to the Top_bar div:

vs this normally:

Phil

Please, try to use the following CSS code:

#Top_bar{
   top: 0!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next