Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • February 13, 2015 at 10:42 pm #396043
    djshortkut

    I just activated a transparent header on my site. Everything is working well except I need some help modifying a couple of things:

    1. Make font weight for main menu items bold. Preferable font-weight: 900 so these items are more visible.
    2. Adjust opacity of black background on menu dropdown so it has the same opacity as the header at 0.2
    3. You helped me make it so that when the menu items are hovered with the mouse, the hover color is #2c5b9c and the active menu item remains at #2c5b9c. This works great except when I go to a page on one of the dropdown tabs then all of the menu items show up in #2c5b9c How can I make it so that the main menu item at the top has the active color of #2c5b9c and the specific page on the dropdown menu has the active color of #2c5b9c but the rest of the menu items remain white until they are hovered over. Hope that makes sense. Here is the code that was used:

    /* Menu item hover and current-menu-item color */
#top .av_header_transparency .av-main-nav li a:hover .avia-menu-text, #top .av_header_transparency .av-main-nav li.current-menu-item a .avia-menu-text{
    color: #2c5b9c !important;
}

    4. On my blog page I activated the transparent and glass header but the header remains the original style. Is it not possible to activate the transparent and glassy header on this page?

    I have attached images for each item. Thanks in advance!

    February 14, 2015 at 2:53 pm #396149
    TjaardHeikens

    Hello,
    You can set some properties of the main menu links under Advanced styling. There you can select this element and change the properties.

    I also has the problem that the transparent Header is not shown up on a page.

    Best regards,

    Tjaard

    February 14, 2015 at 3:17 pm #396153
    QBDSwedenAB

    2. Have you tried clicking up the menu dropdown on the web browser, going to inspect element and find which class to edit?

    February 14, 2015 at 3:26 pm #396155
    TjaardHeikens

    Hello,

    I have inspected the element of the header in Chrome. I added there for the header: color: transparent; but that had not the right effect.

    February 16, 2015 at 6:39 pm #396910
    Josue

    Hi!

    @djshortkut:

    1. Add this:

    .avia-menu-text {
    font-weight: 900 !important;
}

    2. Update this part to::

    /* Submenu background, border and shadow */
.header_color .main_menu ul ul{
    background: rgba(0,0,0,0.2)
}
#top .av_header_transparency .main_menu .menu ul li a{
    background: transparent;
}
#top .av_header_transparency .sub-menu a {
    border: 0 !important;
    box-shadow: none !important;
}

    3. Update this part to:

    /* Menu item hover and current-menu-item color */
#top .av_header_transparency .av-main-nav li a:hover .avia-menu-text, #top .av_header_transparency .av-main-nav li.current-menu-item > a > .avia-menu-text{
    color: #2c5b9c !important;
}

    4. Can you please create us a WordPress administrator account? post it here as a private reply.


    @TjaardHeikens    , can you post a link to your site?

    Best regards,
    Josue

    February 16, 2015 at 7:06 pm #396947
    Andy

    Hey!

    1.) I think your menu font is already bold and 900, but to make sure you can use this code:

    .av-main-nav > li > a {
font-weight: 900 !important;
}

    2.) Use this code:

    #top #wrap_all .av-main-nav ul > li > a, #top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul, #top #wrap_all .av-main-nav ul ul {
background: rgba(0,0,0,0.2);
}

    3.) It’s already working like you want. The submenu remains white when not hovered. Could you fix it?

    4.) Your header is transparent for me. Seems you did it already.

    Let us know when you need more help and please use different threads for different issues.

    Regards,
    Andy

    February 16, 2015 at 7:23 pm #396962
    TjaardHeikens
    This reply has been marked as private.
    February 16, 2015 at 7:36 pm #396974
    Josue

    @TjaardHeikens, can you please create me a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    February 16, 2015 at 7:49 pm #396990
    TjaardHeikens
    This reply has been marked as private.
    February 16, 2015 at 8:15 pm #397043
    Josue

    Hi Tjaard!

    Transparent header is working, problem is this color section you have at the start of the layout – http://screencast.com/t/RiRXmrlkL

    Regards,
    Josue

    February 16, 2015 at 8:17 pm #397047
    djshortkut
    This reply has been marked as private.
    February 16, 2015 at 8:31 pm #397056
    Josue

    @djshortkut, it’s not working because it is loading the default blog template, you’d need to change the blog setting to this and build the blog using ALB elements.

    Best regards,
    Josue

    February 16, 2015 at 9:00 pm #397074
    djshortkut

    Thanks Josue, that did the trick! You can close this thread

    February 16, 2015 at 9:19 pm #397084
    Josue

    You are welcome, glad to help. I’ll wait for Tjaard reply :)

    Cheers!
    Josue

    February 16, 2015 at 9:31 pm #397090
    TjaardHeikens

    Hello Josue,

    Now I see a green header for the page!

    Tjaard

    February 16, 2015 at 9:38 pm #397097
    TjaardHeikens

    Hello Josue,

    I deleted the color section and now it is fine with the transparency. I added the color section to get some space above the slider.

    Tjaard

    February 16, 2015 at 10:13 pm #397122
    Josue

    Great, can we mark this as resolved?

    Best regards,
    Josue

    February 16, 2015 at 10:21 pm #397129
    TjaardHeikens

    Hello Josue,

    Almost. One question is how can I add some extra space above the slider?

    Tjaard

    February 16, 2015 at 10:56 pm #397149
    Josue

    You can use the Separator / Whitespace element.

    Best regards,
    Josue

    February 16, 2015 at 11:01 pm #397151
    TjaardHeikens

    Hello Josue,

    When I add a separator then the colored header comes back!

    Tjaard

    February 17, 2015 at 3:04 am #397208
    Josue

    Hi Tjaard!

    The header doesn’t look transparent because there is a white separator behind of it. Can you post a screenshot/mockup of what would you want to achieve?

    Best regards,
    Josue

    February 17, 2015 at 10:55 am #397346
    TjaardHeikens

    Hello Josue,

    What I would like is the possibility to add more space above the slider. With a separator is doesn’t work well. Then the color comes back. A transparent separator would be the solution, I think, but is that element available?

    Best regards,

    Tjaard

    February 17, 2015 at 11:06 am #397356
    TjaardHeikens

    Hello Josue,

    I solved finally by adding extra space in the layer slider. I moved everything 50px down.

    Thanks for the support. The issue can now be closed.

    Best regards,

    Tjaard

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Transparent Header’ is closed to new replies.