Responsive Renew menu and logo problem

Support
#1

I need a bit of help to resolve a problem I’m having around how responsive alignments work with the Renew stack as the screen size scales down.

Depending on how many items are in the menu, there is a point towards the laptop/tablet size range (when reducing the size of the browser window) where the menu hits the logo, prior to turning into the ‘hamburger’ style menu.

When this occurs, the menu drops down under the logo, but the top element (or headline of the page) seems to get covered by the menu area. Then once it gets to the ‘hamburger’ menu, it acts as expected again.

You can see the effect by going here:


and scaling the browser window up and down.

I’ve tried adjusting various settings about the header, menu, element padding, etc. but to avoid this problem, then it doesn’t look good when not at that size. I don’t understand why it’s doing that, though.
Thanks!

#2

Hi There,

It happens because on those screen size before the menu switch to mobile button, the desktop menu and logo doesn’t fit on just one ROW. The space is not enough. The easiest work around is to adjust logo size if you don’t want to reduce link spacing and remove actual links. See this: https://screencast-o-matic.com/watch/cbQFnxIqtC

@media (max-width: 1100px){
    .x-brand img{
        width:180px !important;
    }
}

For more CSS media query guide, see this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

#3

Thanks Lely, those are probably workable solutions.

However, I’m wondering why the first element (the headline) doesn’t shift down the page (and so gets covered) by the menu. I know the page content can scroll under the menu, but shouldn’t it’s starting position hold it’s spacing under the header/menu no matter the screen size?

Just wanting to be sure there isn’t some other bug going on there, as at some point, if they added more menu options, the same problem would happen again.

#4

Hi There,

To move down the headline, try going to Theme Options > Header > NAVBAR TOP HEIGHT (PX): Adjust this value. Although when I check the menu doesn’t really cover this headline. See this: https://screencast-o-matic.com/watch/cbQY6EI3o2

#5

Hi Lely,

No, I meant like what happens at 22 seconds in, in your first video above.

While I think the fix you outlined will be fine, that behavior still seems a bit odd, as the headline jumps up underneath the menu area (and the menu area moves down). I would think that first element (the headline in this case) should be taking both the header and menu into account. It’s like the element doesn’t know about the menu in a responsive way.

#6

Hi There,

The header and the body are separate parts of the website structure and the header layer is above the body layer, so when it gets higher it covers the body.

The solution provided by Lely would be ideal.

Hope it helps!

#7

Thanks. I’m going to implement Lely’s solution, but just wanted to be sure there wasn’t something else going on, as the behavior seemed odd. If the menu grows too much or we can’t make the logo small enough, we’ll look to other solutions at that point.

#8

Hi again,

When that happens then try considering this solution https://theme.co/community/forums/topic/stacked-navbar-wont-centre-align-on-renew/#post-300284

Hope this helps!

1 Like