Title: Header Nav Bar Hover Colour
Last modified: March 13, 2022

---

# Header Nav Bar Hover Colour

 *  Resolved [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/)
 * Hi,
    I am trying to change the hover colour in the header nav bar, I have tried
   looking for the css but can’t seem to find it, can you please help.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-nav-bar-hover-colour%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15456641)
 * Hi,
 * this is a Custom CSS for the navigation link hover effect:
 *     ```
       .wp-block-navigation__container a:hover {
           color: var(--wp--preset--color--foreground);
           opacity: .8;
       }
       ```
   
 * Hope this helps,
    Ana
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15456778)
 * Hi [@anariel-design](https://wordpress.org/support/users/anariel-design/),
 * thankyou for your swift response. The hover also has two right angled half boxes
   top right and bottom left, this needs to change to the hover colour as well.
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15458273)
 * Hi Bob,
 * ah yes, sorry about this.
    Here it is:
 *     ```
       .wp-block-navigation__container>.wp-block-navigation-item a::before {
           border-top: 2px solid var(--wp--preset--color--foreground);
           border-right: 2px solid var(--wp--preset--color--foreground);
       }
       .wp-block-navigation__container>.wp-block-navigation-item a::after {
           border-top: 2px solid var(--wp--preset--color--foreground);
           border-right: 2px solid var(--wp--preset--color--foreground);
       }
       ```
   
 * and you can change this: var(–wp–preset–color–foreground) with your color, for
   example #efefef
 * Hope this helps.
 * All the best,
    Ana
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15458355)
 * Thanks for that Ana,
 * I will try it tomorrow and let you know how I got on.
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15459449)
 * Oh yes, please let me know 🙏
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15459771)
 * Hi Ana,
 * I have tried your css, however to make it work I had to modify it;
 * .wp-block-navigation-item a::before {
    border-top: 2px solid #ff9226 !important;
   border-right: 2px solid #ff9226 !important; } .wp-block-navigation-item a::after{
   border-bottom: 2px solid #ff9226 !important; border-left: 2px solid #ff9226 !
   important; }
 * Note the border bottom and left on the :: after css. It now works perfectly.
 * On the mobile menu the padding between the label and the borders is non existant,
   could you please help with this css as well.
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15463787)
 * Hi Bob,
 * you can use this:
 *     ```
       .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
           padding: 0 10px;
       }
       ```
   
 * and I’ll add this to the next theme update soon 🙂
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15463806)
 * Thanks once again Ana,
 * I will mark this as resolved.
 * Regards
 * Bpb
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15468075)
 * Hi Bob,
 * you are welcome. If you need any help with the theme please let me know :). And
   if you will have some time to rate the theme I would appreciate it a lot :).
 * All the best,
    Ana
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15469175)
 * Hi Ana,
 * all done
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15474510)
 * Thank you soo much Bob, appreciate it :). Oh, I just uploaded a theme update 
   with the menu hover fix on the mobile.
 * All the best,
    Ana
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15474734)
 * The update works well.
 * Have you thought about adding copyright and date to the footer.
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15478430)
 * Hi Bob,
 * oh, you can add it on your own as a block or you can write me what you would 
   like to have and I can make a block with, that you can just copy-paste to your
   footer. I’ll also add this to the list for the next theme update.
 * Best,
    Ana
 *  Thread Starter [bob reeves](https://wordpress.org/support/users/bob-reeves/)
 * (@bob-reeves)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15478444)
 * Thanks Ana,
 * I will wait for the theme update as I have already added the copyright to the
   footer.
 * Regards
 * Bob
 *  Theme Author [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * (@anariel-design)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15493199)
 * Oki, I added it to my list and will make an update in the next few days.
 * Best,
    Ana

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

The topic ‘Header Nav Bar Hover Colour’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/bricksy/1.5.6/screenshot.png)
 * Bricksy
 * [Support Threads](https://wordpress.org/support/theme/bricksy/)
 * [Active Topics](https://wordpress.org/support/theme/bricksy/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/bricksy/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/bricksy/reviews/)

 * 15 replies
 * 2 participants
 * Last reply from: [Anariel Design](https://wordpress.org/support/users/anariel-design/)
 * Last activity: [4 years, 1 month ago](https://wordpress.org/support/topic/header-nav-bar-hover-colour/#post-15493199)
 * Status: resolved