Border for navigation bar

Hello, I was wondering how to create a separate row for the menu/navigation bar below the logo, with a border around it (top and bottom). The website is jbkundalini.com
Many thanks!

Hello there,

Thank you for contacting us.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {

      #header .menu-wrapper {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
      }
      
    }

Regards,
Kharis
aThemes Support

Thank you! And is there a way to position my menu bar so that it’s exactly centred under my logo? At the moment the menu bar sits slightly to the right.

The code I have in there at the moment is:

#header .site-logo {
max-height: 200px;
}

#header.header .container .row {
  display: block;
}

@media only screen and (min-width: 1025px) {
  #header .site-branding {
    text-align: center;
  }  
  #header.header .container .row {
    display: block;
  }
  #header .site-branding.col-md-3 {
    width: 100%;
  }
  #header .menu-wrapper.col-md-9 {
    width: 100%;
  }  
  #header #mainnav {
    float: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 1025px) {

  #header .menu-wrapper {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  
}

Thanks again

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      #mainnav ul.menu {
        padding-left: 0;
      }
    }

Regards,
Kharis
aThemes Support

Excellent. Thank you!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support