Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #533126

    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.


    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.



    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: 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?



    for this use this code:

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

    and adjust as needed.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.