MENU: remove the circle surrounding the words

[fidoba]

Hey!

1. How can I remove the circle surrounding the words in the menu?

2. How can I change menu hover color to #A4CCE2

Link: http://atelierjames.co.uk/

Example: https://snag.gy/54cOs1.jpg

[nabeel]

Hi there,

Thank you for reaching out to us. To change your navigation menu style please

/* Change menu item hover color */
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a, 
.x-navbar .desktop .sub-menu a:hover, 
.x-navbar .desktop .sub-menu .x-active > a, 
.x-navbar .desktop .sub-menu .current-menu-item > a, 
.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, 
.x-navbar .mobile .x-nav li > a:hover, 
.x-navbar .mobile .x-nav .x-active > a, 
.x-navbar .mobile .x-nav .current-menu-item > a,
.x-navbar .desktop .x-nav>.x-active>a>span, 
.x-navbar .desktop .x-nav>.current-menu-item>a>span {
    color: #A4CCE2 !important;
}

/* Hover restyling */
.x-navbar .desktop .x-nav>li>a:hover>span,
.x-navbar .desktop .x-nav>.x-active>a>span, 
.x-navbar .desktop .x-nav>.current-menu-item>a>span {
    border-color: transparent !important;
    border-radius: 0 !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[fidoba]

Thank you!

[paul.r]

You’re welcome!