style navigation dropdown menu

  • Resolved blomstrande

    (@blomstrande)


    9 years, 1 month ago

    Hey!

    I’m trying to do some styling to the dropdown menu of the main navigation menu on my site but without luck. I’d like to remove the dark block that the dropdown menu is displayed in, could anyone help me with the code?

    Loving the theme overall and with some tweaking I think I might get exactly the look I want for my site ??

    Thankful for any help!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Would you mind posting a link to the site you’re working on so that I can see exactly what you’re talking about?

    Thanks!

    Thread Starter blomstrande

    (@blomstrande)

    Ah sorry, of course. here it is: https://www.blomstrande.com

    I’d like to push the dropdown menu up a bit so that it is displayed in the white area (now it shows on top ot the slide show). And then I’d like to style the dropdown menu and remove the grey block so the menu items are displayed only as a black text on the white background.

    Would that be possible? ??

    Give this CSS a try and let me know if it works for you!
    Paste it into Appearance >Theme Options >Advanced Settings

    ul.sf-dropdown-menu {
    margin-top: -60px;
    background: transparent;
}

ul.sf-dropdown-menu li a span {
    color: #777;
}

    Hope that helps!

    Thread Starter blomstrande

    (@blomstrande)

    Great, thanks! That did help a lot.

    The only problem I’m having now is that the dropdown menu is displayed on the far left and I’d like it to go straight underneath the menu topic. How do I do this when I have 2 different dropdown menus?

    If possible I’d also like to remove the shadow that is still displayed around the dropdown menu.

    Thanks again! I’d really be lost without this great support forum.

    hannah

    (@hannahritner)

    Hey blomstrande,
    I’m seeing your dropdown right under your menu. Did you figure this out?
    You can use this css to remove the box shadow:

    ul.sf-dropdown-menu {
    box-shadow: none;
}

    Hope that helps!

    Hannah

    Thread Starter blomstrande

    (@blomstrande)

    Thank you! That removed the shadow and now the styling of the dropdown menu is just as I wanted it.

    With the position of the dropwdown menu I just added padding on the left. This might be a problem though if I have a long navigation menu and different dropdown menus since they all will be displayed on the same spot. I think my simple solution will work for now though but if anyone has a solution that would automatically center the dropdown menu right beneath the navigation menu topic I’d be glad.

    Thank you all for your great help!

    To force the dropdown to center you would need to set a width for each. this css would work:

    ul.sf-dropdown-menu {
    width: 600px;
    margin-left: -300px;
    left: 50% !important;
}

.sf-menu li {
    position: relative;
}

    Kadence Themes

    Thread Starter blomstrande

    (@blomstrande)

    Perfect! Thank you so much, problem solved!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘style navigation dropdown menu’ is closed to new replies.