Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 10, 2015 at 10:34 am #533126
    emeraldwave

    Hi,
    I am wondering how to do the following in my main navigation header:

    (1) The white text against my image is not easy to read so I want to add a slightly transparent dark background behind the text, something like this:
    #header_main {
    background-color: rgba(60, 59, 59, 0.2);
    }
    The above works until I scroll down the page, then the shrinking menu also uses this background colour, which I don’t want. The shrinking menu should just use white background colour instead. What css can I use to make both backgrounds work?

    (2) When I have more menu items listed in the main menu, on smaller screens these don’t fit well horizontally – the menu items start to appear overlapping behind/in front of the logo, for example on iPad – How can we fix that?

    Private data is enclosed if needed to see these issues on my website.

    Thank you.

    November 10, 2015 at 8:46 pm #533661
    Andy

    Hi emeraldwave!

    1.) Use this code in Quick CSS field:

    #top .av_header_transparency #header_main, #top .av_header_transparency .avia-menu.av_menu_icon_beside {
background-color: rgba(0,0,0,0.5);
}

    and adjust “0.5” for opacity as needed.

    2.) You can activate mobile menu instead by using this code in Quick CSS field:

    @media only screen and (max-width: 1200px) {
a#advanced_menu_toggle {
display: block;
}
nav.main_menu {
display: none;
}}

    This will activate mobile menu until a maximum screen size of 1200px. Adjust it as needed.

    Cheers!
    Andy

    November 12, 2015 at 9:59 am #534636
    emeraldwave

    Hi Andy,
    Thanks this worked and now we can read the white menu texts against paler images.

    I have since changed the effect to use a text-shadow on the menu texts as shown here, which works great: https://kriesi.at/support/topic/shadow-on-the-menu-text-in-the-header/ with this code:

    #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, .logo img {
    text-shadow: 1px 1px 4px #000; 
}

    My question is, how can I add the same drop-shadow effect to the Logo Image – only on transparent header view?

    November 12, 2015 at 1:56 pm #534737
    Andy

    Hi!

    for this use this code:

    strong.logo {
box-shadow: 4px 6px 1px 5px #000000;
}

    and adjust as needed.

    Regards,
    Andy

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.