Header Menu Underline Effect

Chad Smith

• October 09, 2020 23:00
• Edited

Does Brizy Pro have a feature to do a basic header menu underline effect, like on this site? https://www.journeys.com/ 

If not, can anyone point me in the direction where I would enter custom CSS to do this in Brizy globally.  

I'm new to the Brizy system but loving it.

Thanks,

Chad

Inkling Solutions

0

• 

  Sandra Prunici

  • October 12, 2020 09:16

  Hi,

  Yes, it is possible to add the underline effect on hover for Menu element in Brizy Pro. For this, you have to click on a menu item and go to the Colors. From there select the Hover option and after this the Border. From there add value for border-bottom and select the colour. See here https://jmp.sh/WiT27o5. My header block is set as Global block and added for all pages, therefore all modification I made on a header block in a page, will e reflected in all pages. If you want to know something more about Global block settings, please check this video https://www.youtube.com/watch?v=6WsLMInkzMI.

  Thanks!

  Best regards,
  Sandra

  0
• 

  Chad Smith

  • October 12, 2020 14:19

  Sandra,

  Thanks for the support.  I had already custom css coded it in for the header and it's working fine but i'll checkout way also, so I can keep it the custom coding to the minium.

  Chad

  0
• 

  Sandra Prunici

  • October 13, 2020 08:19

  Hi Chad,

  You are welcome! It's my pleasure to help you!
  Let us know if we can help you with something else.

  Best regards,
  Sandra

  0
• 

  Chad Smith

  • October 14, 2020 13:02

  Sandra,

  That worked to some extent but when you hover over the menu page, the underline green border is there but it also raises the whole selection, like it's jumping out at you.  I've look around to see if you had any control over that in Brizy but doesn't look like there were was a feature to adjust that.  

  I simply just want the line under the menu page when you hover over it, no other effect.   Can you point me in the right direction to resolve that.

  Below is a screenshot of me hovering over Culture and you can see how it raises up.

  I'm looking to have the hover to simply just place an underline link on Journey's navigation here: https://www.journeys.com/ 

  

  0
• 

  Sandra Prunici

  • October 15, 2020 09:13
  • Edited

  Hi, Chad,

  Unfortunately, at the moment in such a way is working the hover underline the menu item in Brizy editor. If you want to avoid this effect, you have to add some Custom CSS.  This Custom CSS you have to add in the Menu options -> Settings -> Advanced -> Custom CSS https://jmp.sh/PxU7LeZ. For example, if you added a border-bottom with 3px, you have to add -3px (the same value only as negative) margin-bottom for the hover of the menu item. You can try this code, for me it was worked:
  
  element li:hover {
  margin-bottom: -3px !important;
  }

  Instead of -3px, you have to add the value you added for the border-bottom.

  Best regards,
  Sandra

  0
• 

  Chad Smith

  • October 17, 2020 01:22

  Thanks, that helped.

  0
• 

  Sandra Prunici

  • October 19, 2020 09:26

  You are welcome.

  Best regards,
  Sandra

  0

Please sign in to leave a comment.