tamerlaneunreal

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • in reply to: menu overlaps content when resizing browser #49524
    tamerlaneunreal
    Participant
    in reply to: Header and static image cut by menu #44052
    tamerlaneunreal
    Participant

    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;} 
    }
    in reply to: Header and static image cut by menu #44050
    tamerlaneunreal
    Participant

    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

    in reply to: Header and static image cut by menu #44048
    tamerlaneunreal
    Participant

    you’re welcome

    in reply to: Header and static image cut by menu #44043
    tamerlaneunreal
    Participant

    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
Viewing 5 posts - 1 through 5 (of 5 total)