Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 13, 2021 at 6:53 pm #1305470
    xuamox

    First off, let me begin by saying that I love the Enfold theme, and I use it for most of my client projects. The theme is great, and for the most part it’s easy to customize. The one area where I always get bogged down with customization is the menu and mobile menu. Typically, these two menus need to look a bit different, but using css to style them is not straightforward. The two menus are interconnected, and that makes it hard to customize some suttle changes. The options under Advance styling are also limited and don’t give you full control over the mobile sub menu. As a web designer and frequent user of Enfold, I would like to make the suggestion to be able to style the mobile menu completely separately from the main menu. That would give designers total control over what they need for their particular application.

    Here are the current issues that I am trying to fix

    1. 1. My main menu uses an on hover background color, however, my last menu item is a button, so I don’t want that item to have a background hover. I would just like the button to behave like a button.
    2. 2. I would like to use a different font for my sub-menu items, but don’t have that option under Advanced Settings
    3. 3. My sub-menu drop-down has a very thin border around it that I can’t seem to be able to get rid of.
    4. 4. How do I change the mobile menu hover color for each menu item?
    • This topic was modified 3 years, 6 months ago by xuamox.
    June 15, 2021 at 4:39 am #1305706
    Rikard

    Hey xuamox,

    Thanks for using Enfold. I’m not sure if any of the points you are listing are very common requests, so they will likely not be added to the theme options.

    1. There is no hover state on mobile, do you mean that you don’t want the button at the end to have a background when tapping on it?

    2. Please try the following in Quick CSS under Enfold->General Styling:

    #av-burger-menu-ul ul.sub-menu .avia-menu-text {
  font-family: 'verdana', arial !important;
}

    3. I’m not sure exactly what you are referring to here, could you post a screenshot highlighting what you would like to remove please?

    4. The hover state does not exist on mobile, so I’m not sure which state you are trying to target? Do you want to remove the colour in a specific state, or do you want to have different behaviour for each of the menu items?

    Please try to start a separate thread for each of your problems in the future, as threads with multiple questions can get very hard to follow after a few replies.

    Best regards,
    Rikard

    June 15, 2021 at 7:17 pm #1305885
    xuamox

    Hi Rikard,

    Sorry, let me clarify. The hover state is on the desktop/responsive version, but it also happens on the button. So I am trying to isolate the button so that the hover state does not happen.

    In terms of changing the font on the sub menu, I had to set the font for the main menu in the Quick CSS area because I had to add a Google font and it was not available in the dropdown under Advanced Settings. So not sure if that is also impeding the code that you provided from changing the sub-menu font.

    /* set font for main menu because Google font is not available in dropdown */ 
.avia-menu-text {
    font-family: "Patua One" !important;
    letter-spacing: 2px !important;
}

    I have added some screenshots to provide more information and detail to my questions.

    Thanks

    • This reply was modified 3 years, 6 months ago by xuamox.
    June 17, 2021 at 4:45 am #1306109
    Rikard

    Hi,

    Font for sub menu items; did you get this working, or do you still need help?

    Screenshots:

    1. Please try this CSS:

    #menu-item-6576:hover > a {
    background: transparent !important;
}

    2. Please try this CSS as well:

    #av-burger-menu-ul li a:hover {
    background-color: green !important;
}

    3. And this to remove the border:

    .av-main-nav ul li a {
    border: none;
}

    Best regards,
    Rikard

    August 9, 2021 at 7:39 pm #1315892
    xuamox

    Thanks for your help

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Enfold Mobile Menu Styling’ is closed to new replies.