[Axel-o]

Depending on the users screen size, resolution or browser zoom, the menu line drops down 1 or more lines and cuts the upper part of the image, on the landing page as well as on other pages.

Samples can be seen here:
Samples

I´d appreciate this being fixed as soon as possible!
Thank you.

Website: www.icct-web.cl

[tamerlaneunreal]

While Zed is studying on a way to improve “long menus” display on desktop low resolution screen (or small window)
please feel free to try this CSS code (put it in your custom css file o in the “customize theme/custom CSS” section:

/* MENU FIX for FLUIDA */
@media (max-width: 1440px) { /* change 1440px into your needed max-width */
	#masthead.cryout #access {display: none;} /* hides the full textual menu */
	#masthead.cryout #nav-toggle {display: block;} /* display the mobile menu (stack icon) */
	#masthead.cryout #sheader {display: none;} /* hides the social menu, remove this line if u don't have it on the main menu */
}

OBVIOUSLY change 1440px into a resolution which acts as limit for your menu
(think of it as “if my maximum width is XXXXXpx, then switch the full menu into mobile menu)

• This reply was modified 7 years ago by tamerlaneunreal.
• This reply was modified 7 years ago by tamerlaneunreal. Reason: improved code readability
• This reply was modified 7 years ago by tamerlaneunreal. Reason: added comments

[Axel-o]

Hi tamerlaneunreal, thanks for the fast solution. Works quiet well while a better solution is on it´s way.

[tamerlaneunreal]

you’re welcome

[tamerlaneunreal]

if you are interested I’ve coded another “temporary fix” wich basically just reduces the size of the font

@media (max-width: 1440px) {
#masthead.cryout #access {font-size: 0.7em;} 
}

You can apply a different font size ( 0.7em in my case is already pretty extreme)
You can also apply a different font size for different resolutions; just copy and paste another CSS code with, for example:

@media (max-width: 1440px) {
#masthead.cryout #access {font-size: 0.8em;} 
}
@media (max-width: 1240px) {
#masthead.cryout #access {font-size: 0.6em;} 
}
@media (max-width: 1024px) {
#masthead.cryout #access {font-size: 0.4em;} 
}

don’t forget to comment the previous fix in case you’re gonna use this one

• This reply was modified 7 years ago by tamerlaneunreal.

[tamerlaneunreal]

or…if you want the “best” of the two worlds, this works for me:

/* MENU FIX for FLUIDA  */
@media (max-width: 1240px) {
#masthead.cryout #access {display: none;} 
#masthead.cryout #nav-toggle {display: block;} 
#masthead.cryout #sheader {display: none;} 
}

@media (max-width: 1440px) {
#masthead.cryout #access {font-size: 0.8em;} 
}

[Author]

Posts