WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to lower the sub-menu bar? (10 posts)

  1. Claudia
    Member
    Posted 1 year ago #

    I have a sub-menu on my Blog and when I hover the Menu item that has that sub-menu, the sub-menu bar appears covering the Menu bar.

    How can I lower it, to be exactly below the Menu bar, instead of covering it?

    Thank you!

    This is the blog: http://www.aplacefortwiggs.com/ and the Menu item with Sub-Menu is Photography.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hi Claudia,

    I don't know whether you have, or know a place to add this CSS;

    .topnav li {
     position: relative;
    }
    
    .topnav li ul {
     top: 29px;
    }

    If you do, that should resolve your query.

  3. Claudia
    Member
    Posted 1 year ago #

    I tried to add that CSS and it didn't work, the Sub-Menu jumped to the header!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try this instead;

    .topnav li:hover, .topnav li.hover {
     position: relative;
    }
    
    .topnav li ul {
     top: 29px;
    }
  5. Claudia
    Member
    Posted 1 year ago #

    Sorry, but it doesn't work...

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you adding the styles right at the bottom in your stylesheet? If so, in which stylesheet? I don't know your method, i.e if you're using a Child Theme or Custom CSS plugin, or custom theme.

  7. Claudia
    Member
    Posted 1 year ago #

    Ok, I wasn't adding to the bottom, I was adding on the styles themselves. I looked for those styles and added what you told me to, but not on the bottom.

    I'm changing the theme itself. I know this is not the right way, but I couldn't figure out how to make a child theme when I did this.

    I added in the bottom like you told me to, however it gets tricky to access the sub-categories. It's like I have to hit a very specific point with my mouse, so that the sub-menu doesn't disappear.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I see.

    How about changing the code's value of 29 to 27 or 26 ?
    E.g,
    From this;

    .topnav li ul {
     top: 29px;
    }

    To this;

    .topnav li ul {
     top: 27px;
    }
  9. Claudia
    Member
    Posted 1 year ago #

    Perfect!!! Thank you!

    I will donate something to you soon, because you're from far my favourite moderator!

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    :O ! You're very kind.

Topic Closed

This topic has been closed to new replies.

About this Topic