How to change navigation border size on icon stack

[monger]

I am using this css I would like to know how I can make the border on hover larger

x-navbar .desktop .x-nav>li>a:hover>span {
border-color:rgb(147 203 223);
}
.x-navbar .desktop .x-nav>.x-active>a>span, .x-navbar .desktop .x-nav>.current-menu-item>a>span {
border-color: rgb(147 203 223);
}

[ruenel]

Hello George,

Thanks for writing in!

To increase the border thickness, you can simply add border-width CSS property.
For more details, kindly check out this documentation:

• https://www.w3schools.com/cssref/pr_border-width.asp

For example;

.element-class {
   border-color: red;
   border-width: 5px;
}

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this makes sense.

[monger]

@ruenel

border-width: 5px;

Thanks it made sense it works

[monger]

The hover border is the issue I need to fix

[ruenel]

Hello George,

The basic HTML for the hover can be like this:

/* active state */
.element-class {
   border-color: red;
   border-width: 5px;
}

/* hover state */
.element-class:hover {
   border-color: red;
   border-width: 5px;
}

You can check out this HTML documentation here:
https://www.w3schools.com/cssref/sel_hover.asp

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Best Regards.