CSS issue in the header because of specific menu integration

  • webmestre



    Previously I was integrating the “nav” div in the header for design purposes.

    With the latest version of the Graphene Theme, when I try to do it the sub menus disappear below the end of the header.

    I hope my explanations are clear enough. Which piece of CSS should I add or change to correct it ?

    Notice that I have a similar issue when integrating the Uber Mega Menu plugin in the header using the appropriate action hook.

    Thanks in advance.


    Kenneth John Odle


    I hope my explanations are clear enough

    Not really. How were you “integrating” the nav div in the header? For what design purposes? INW—what were the effects you were going for? It may be possible to achieve the same effect without hacking into the theme’s files, which you should never do. (Use a child theme instead.)

    Submenus are a javascript issue. A simple CSS fix may not be enough.

    Please include a link to your site.



    Ok thank you for your reply. The website is http://www.gollnisch.com

    The aim is to integrate the nav in the header using a transparent background so the red color comes from the header image. As a result the person on the right is over it.

    Here you can see what the issue is with the latest version of the grapheme theme. http://www.gollnisch.com/issue-with-menu.png

    Any idea?



    Try this. Increase z-index value until you see the menu over the header image.

    #header-menu-wrap {
    z-index: 25;



    Thank you Prasanna for your help but it doesn’t solve the problem. In the screenshot I’ve given it is voluntary that the menu is “too high”. It is done like this for testing to demonstrate that the submenues are not displayed over the content of the website.



    Did you hack the theme core?



    Yes I did. I move the “nav” div at the end of the “header” div + some css



    Did you change any class name or div ID? Can you provide us your modified theme head and css code?

    Use http://pastebin.com to share code



    the own core modif is the one I discribed above. Then I applied a magin to “nav” that’s all.

    The question is what has changed in the theme between 1.6.x and 1.7.2 which change this comportement.



    The theme has gone through a lot of changes from 1.6.X to 1.7.2. Header image has a class now, menu is wrapped in header-menu-wrap etc..,

    You are using an older version of Graphene. So, the above custom CSS I’ve given might not work..

    You can see the change log here. – https://forum.graphene-theme.com/documentation/changelog/

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

  • You must be logged in to reply to this topic.