Sportsman PRO, menu disappears with non transparent header

[marcel.wezenberg]

Hello,

Due to responsive design, when the screen becomes smaller, or if you resize the window of your browser, at a certain point the regular menu switches to a mobile menu. The three horizontal stripes. This works fine if the header is transparant. But if you make the header non-transparant it doesn’t work anymore, it seems the menu goes to a place somehwere half your screen and becomes hidden.

See below picture to illustrate. This is the default Sportsman Pro theme, I made one change, non transparant header.
https://imgur.com/eBhsHMU
The easiest way to reproduce is to resize the internet browser till the menu disappears. If you keep making it smaller it returns again.

Please let me know how to the get the menu back in the correct position.

Thanks.

Kind regards,
Marcel

[Sonnal S Sinha]

Hi,

Kindly show us your website URL please?

Regards,
Chris

[marcel.wezenberg]

Hello Chris,

Our site URL is www.ijgv.nl
(Brad has login details if you need those)

Simply start resizing your browser (Windows 10), at a certain moment the menu is completely gone.
I get saw this when using my ipad PRO in portait mode. (Iphone landscape/portait modes are both fine)
In an earlier design phase we used transparent header which didn’t have this problem, but later I’ve been asked to switch off transparency in favorite of clearness of the menu.

Kind regards,
Marcel

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:1023px) {
#simple-menu { top:30px !important;}
}

Regards,
Chris

[marcel.wezenberg]

Hello Chris,

Thanks for the CSS code, this solved the issue.

One thing I noticed with the menu on a tablet. With an Ipad you can easy rotate. So if you start in portrait view, with the mobile look menu. Now you go to a random page, next you rotate the Ipad as it’s more convenient in landscane to read that page. Now you do get the normal text-based menu as well, but they don’t work. You need to refresh the page to get them active again. It’s not big thing, but if you know the cause I would be interest.

Thanks again for CSS.

Kind regards,
Marcel

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

Regards,
Chris

[marcel.wezenberg]

Hello Chris,

This how the normal landscape menu looks like:
https://imgur.com/EOYlx3H

Many of the menus have sub menu’s indicated by small sign right of the text.

Now in portrait mode, you’ve the mobile menu, select a random page, eg Badminton
https://imgur.com/onBwk7U

Now rotate to landscape again, you get this:
https://imgur.com/2Hh2aTv

The submenu indicators are gone and the menu doesn’t work anymore, a page refresh is the only solution.

Hopefully you know what causes this.

Kind regards,
Marcel

[Author]

Posts