Header and static image cut by menu

Forums » WordPress » Fluida » Bugs

  • Author
    Posts
  • April 16th, 2017 at 17:01 #43950
    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

    April 17th, 2017 at 18:42 #44043
    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
    April 17th, 2017 at 18:50 #44047
    Axel-o

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

    April 17th, 2017 at 18:50 #44048
    tamerlaneunreal

    you’re welcome

    April 17th, 2017 at 19:30 #44050
    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

    April 17th, 2017 at 19:43 #44052
    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
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Header and static image cut by menu’ is closed to new replies.