Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 14, 2019 at 4:01 pm #1156825
    brayn_design

    Hi there,

    I am trying to achieve some rather specific wishes for a menu indicator on one of my websites (Link in private content)
    As you can see when browsing there I am close to having the active menu item and the hover menu item to look as I want them look, however there’s some bad looking issues when hovering over the logo or when “Home” is active. The other items seem to work fine.

    Now obviously this has something to do with how I targeted my css elements, but I can’t figure it out, been trying for quite a while.

    I have also added a temporary login link with credentials so you guys can have a look at the backend.
    Link will remain active for one week, if more is needed I can extend at any given time.

    I’m hoping you guys will be able to help me figure this out. Thanks in advance for your time.

    Regards,
    Rick

    November 16, 2019 at 3:10 pm #1157467
    Victoria

    Hey brayn_design,

    https://cl.ly/aae4f80f53b4 This code in your Quick css is causing it, why do you need links to jump like that on hover? You need to remove this code.

    Best regards,
    Victoria

    November 18, 2019 at 10:29 am #1157780
    brayn_design

    Hi Victoria,

    Thanks for your reply. I need that bit of code because I achieved the current look of the menu indicators through some band-aid fixes. I’ve removed the bit of code so you can see what happens: https://prnt.sc/pyf01g

    Basically I’ve given the menu items a border on hover and for the active menu items also a white background colour, then to create the height of the indicator I added margin to the top. This margin also pushes my menu names down, so I had added the bit of code you saw to bring it back up. It works o.k. for anything except the ‘Home’ button and the logo.

    Would you know of any way to achieve the same (including the home button) without the logo jumping on hover?

    • This reply was modified 5 years, 1 month ago by brayn_design.
    November 20, 2019 at 3:20 pm #1158496
    Victoria

    Hi brayn_design,

    Please remove the code you added and we will try to come up with the solution for you.

    Best regards,
    Victoria

    November 20, 2019 at 3:29 pm #1158503
    brayn_design

    Hi Victoria,

    All custom css is now removed.

    Thanks,
    Rick

    November 24, 2019 at 4:24 pm #1159604
    Mike

    Hi,
    Sorry for the late reply, is this what you were looking for?
    2019-11-24-092119
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    
.menu li.current-menu-item a > .avia-menu-text {
  border: 3px solid #0DA5CD;
  border-radius: 10px;
  padding: 3px;
  background: #fff;
}
.menu li a:hover > .avia-menu-text {
  border: 3px solid #0DA5CD;
  border-radius: 10px;
  padding: 3px;
  background-color: #fff;
  color: #000 !important;
}
#top .av-main-nav > li > a:hover {
	padding: 0 5px !important;
}

    Best regards,
    Mike

    November 28, 2019 at 2:34 pm #1160981
    brayn_design

    Hi Mike,

    Thank you very much for your support, this is exactly what I needed. Slightly edited your code and it looks exactly like it should now.
    Link in private content in case you’re curious as to what the idea was.

    Thanks again, have a great one!
    Rick

    November 29, 2019 at 12:17 pm #1161208
    Mike

    Hi,
    Glad to hear, and it looks nice.
    We will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Looking for some assistance with menu indicators’ is closed to new replies.