Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 29, 2015 at 6:42 pm #510927
    fesarlis

    Hello.
    I am trying to create a different look for main menu, and have been experimenting with CSS. I messed it up a little bit, though.
    I do not need extra features so I would not want to purchase a menu plugin just for the look.

    In particular I would like to create a ‘floating’ look. I mean, a centered menu below header, that could sit on top of eg. a color section or a slider. I attach a picture to give an idea.

    The issues that I’ve faced so far, is that the background and pattern chosen inside Enfold settings for header, are applied also to the main menu section.

    I hope I’ve been clear enough. If not please let me know.

    September 30, 2015 at 2:56 am #511081
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    September 30, 2015 at 9:49 am #511243
    fesarlis

    Hello.
    Site is currently stored locally, so it is kind of difficult. Can I help in any other way?

    September 30, 2015 at 10:05 am #511267
    Josue

    Try playing with the FullWidth Submenu element instead, that way you can have it outside the header.

    Regards,
    Josue

    September 30, 2015 at 11:06 am #511323
    fesarlis

    Thank you, I’ve added it and it seems promising. Two more questions:

    1. How will I disable the main menu above?
    2. Which CSS class to edit for the fullwidth submenu?

    Thank you

    September 30, 2015 at 11:08 am #511328
    Josue

    Hi!

    1. Add this:

    #header .main_menu {
    display: none;
}

    2. Try inspecting that element with dev tools (chrome / firefox).

    Regards,
    Josue

    September 30, 2015 at 9:32 pm #511834
    fesarlis

    Thank you, will experiment more.

    One final question please.

    If I enable the ‘Logo left, menu below’ option, and have specified gradient (in custom CSS) and pattern (in Enfold) for header, is it possible that those settings do not apply to the menu below?

    Thank you

    September 30, 2015 at 9:53 pm #511840
    Josue

    You could set a white background to the menu below:

    div#header_main_alternate {
    background-color: white;
}
    October 1, 2015 at 7:11 am #511968
    fesarlis

    Thank you.
    I have already tried it. The problem which remains is that if the color is set to be transparent (eg rgba(255,255,255,0.5), it still shows the header background and pattern below it. I need this bar to be styled completely individually from header above.

    October 1, 2015 at 11:38 am #512078
    Josue

    Well you can’t, because the menu lives inside the header, refer to my previous answer – https://kriesi.at/support/topic/different-main-menu-with-css/#post-511267

    Best regards,
    Josue

    October 1, 2015 at 12:40 pm #512102
    fesarlis

    No big deal. Thank you anyway for your fast response.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Different main menu with CSS’ is closed to new replies.