Home / Forums / DynamiX Support / Transparent Menu

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts

  • Gretchen Bayless
    Participant

    Hello – I have attempted to set the transparency of the my header under Appearence/Theme Options/Customize/Header/Background Opacity. I have tried different numders (22, 46, etc) and saved but none of them work. The header is still white. Can you help? http://www.aluma-kor.com/

    Hi @g_bayless

    Can you please send us login credentials for your site so we can personally check and test it from our end?

    Thanks!


    Gretchen Bayless
    Participant
    This reply has been marked as private.

    Hi @g_bayless

    Our sincerest apologies for the delayed reply.

    The transparency settings under Appearence/Theme Options/Customize/Header/Background Opacity only works for the menu when the you scroll the page and the menu scrolls with the page.

    The header area is actually transparent by default, and the main issue with your layout is how the elements are positioned. We can reposition the header via CSS, but your logo and menu does not look good with it. Here’s a mockup of how it looks: http://i64.tinypic.com/1nzckp.png

    Thanks!


    Gretchen Bayless
    Participant

    I will change menu font size and color but how do I make it transparent first?

    Hi @g_bayless

    Use this CSS to make the header transparent:

    .sticky-wrapper {
        position: absolute;
        width: 100%;
    }

    Thanks!


    Gretchen Bayless
    Participant

    That does make it transparent but it also pushes the menu down under the logo and left justifies it.

    Hi @g_bayless

    You actually set the menu to be aligned left under ‘Header’ on Theme Options that is why it is now floating left. You just need to update the menu alingment to ‘Right’ and it should look the way you want it.

    Thanks!


    Gretchen Bayless
    Participant

    Oh okay thanks:)
    So now the menu is transparent, I updated the font size and color but now the drop down menu background is white. I cannot find where to change this. Can you help?

    Hi @g_bayless

    Use this CSS to change the color of the submenu background from white to any color you want
    #header #nv-tabs ul ul {
    background-color: ‘hexcode of color’;
    }

    Thanks!


    Gretchen Bayless
    Participant

    I’d like it to be semi transparent. How do I do that?

    Hi @g_bayless

    You can use this for a semi-transparent white background

    #header #nv-tabs ul ul {
        background: rgba(255,255,255,0.1);
    }

    Again, please keep in mind that this will not look good. You can use the CSS and check out your pages and you will see that the transparency on the submenu bar will not look good.

    Thanks!


    Gretchen Bayless
    Participant

    I agree and I was able to talk the customer out of it. However, now they want a white background over the main menu item when you hove over it. Is that possible?

    Also, now the menu is transparent which I have tried to talk them out of, the menu on the interior pages of the site cover up content. Is there a way to make the header background white for interior pages?

    Hi @g_baylesss

    I have redone the CSS and the transparent header is now only evident on the homepage while the header on the pages is not transparent.

    I have also set the header to have a white background if it is hovered.

    Thanks!


    Gretchen Bayless
    Participant

    Oh wow thank you!

    Is there any way to have the sticky menu background turn white as you scroll down the home page? Otherwise the text is too hard to read.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.