Customize the header to stay a fixed width for desktop

PenciDesign replied

8 years ago

Staff Reply

Hi,

1/ When you resize your browser to small width, of course you can't keep the header container width because if you keep it - your site will can't responsive.

I think the best solution here is ajust the width for logo & ads area for this screen, please add more this code to Customize > Custom CSS to ajust it:

\
@media only screen and (max-width: 1169px) and (min-width: 961px){
.container.has-banner #logo {
    width: 400px;
    padding-right: 20px;
}
.container.has-banner .header-banner {
    width: 540px;
}
}

Change number 400 & number 540 on the above code to the width for your logo area & the width for ads space. Make sure total of 2 values is 940px.

2/ Please try add more this code to Customize > Custom CSS to make it center when stacked:

\
@media only screen and (max-width: 960px){\
 .container.has-banner #logo{ max-width: 100%; }\
}\

3/ The logo for vertical mobile nav will appears on vertical mobile nav like here

4/ You can disable lazyload images to do that. Because all lazyload images need to wait your site load done before load the images, here is all disable lazyload images options in this theme:

Disable lazyload images on category mega menu on Customize > Logo and Header Options

Disable lazyload images on all layouts, widgets on Customize > General Options

Disable lazyload images on featured slider on Customize > Featured Slider Options

Disable lazyload images on single posts page on Customize > Single Post Options

Best Regards,

PenciDesign

crazyadventures started the conversation

8 years ago

Conversation Start

Hi there!

I'm using Soledad Food theme with header layout 3 (which allows for a banner ad in the header area). I see in the coding that the logo is aligned left with the banner ad aligned right. I also see that, in Customize, you can set a max width for the header (I've set to 400 currently). But is there a way to make it so the header never shrinks on Desktop? Currently, the logo displays just fine side-by-side with the ad when full screen. But when you begin to shrink the browser window, the header also begins to shrink and becomes unreadable until it stacks above the ad (at the full width) when the window is too small. I'd rather have my logo set to remain at 400 and to immediately stack and not shrink, if at all possible.

Also, is it possible to get them to center when stacked?

Another thing - I am in the process of redesigning my logo to make the tagline more easily read (which, with this header layout, I've had to design the tagline into the logo), which is part of the reason why I want my logo to remain the same size - so you can read it, AND the tagline, when the window shrinks. But, in editing the logo and uploading a new one, now the mobile logo (which is a different stamp-looking logo than my main desktop one) is displaying the desktop logo, and NOT the one I've uploaded for the mobile logo.

Finally - is there some way to write into the code to load all the images first before javascript loads (as in, the ads I have on my site tend to slow down the images from loading, as they are rendering first instead of the images)?

Attached you'll find screenshots of the regularly, full-screen logo/ad header and then the smaller unreadable logo when browser window width is shortened.