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

Comments

• Phil

  October 2021

  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

  October 2021

  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

  October 2021

  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

  October 2021

  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

  October 2021

  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