Reply To: Making rounded navigation pills work on index-corporate-3

#10035432
Support
Keymaster

Hello,

In this specific demo this issue occurs because the skin file skins/skin-corporate-3.css has a code to force squared borders. You can use the style switcher to generate a new skin file with rounded borders, but this will be applied to all elements on the demo. As you want only in the head navigation items, please follow the steps below:

1) First add the class header-nav-main-rounded to header-nav-main div:

<div class="header-nav-main header-nav-main-rounded....................

2) Add the given custom css code below at (css/custom.css):

@media (min-width: 992px) {
    #header .header-nav-main-rounded nav > .nav-pills > li > a,
    #header .header-nav-main.header-nav-main-rounded nav > ul > li.dropdown:hover > a,
    #header .header-nav-main-rounded nav > .nav-pills > li:hover > a {
        border-radius: 1.5rem !important;
    }
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads