Move Top Menu a little bit to the left

Dear Support,

I would like to move the top menu (main menu) a little bit to the left so that I have more space for sub-sub menus to expand to the right. How is this possible with css?

Thanks in advance

Dear Isfak,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:1025px){
  
  .site-header .col-md-4{
    width: 20%;
  }
  
  .site-header .col-md-8{
    width: 80%;
  }  
  
  #mainnav{
    margin-right: 200px;
  }
  
}

You would make an adjustment accordingly.

Regards,
Kharis

Dear Kharis,

I copied the code into Simple Custom CSS and works fine! (Does not work when I inserted in my child theme though, can’t understand why.)

Thanks so much for the effort!

Hello there,

Please make sure the group of CSS code in your child theme’s style.css doesn’t contain any error. The CSS code which comes after an error line won’t be executed by the web browser. Try validating it using this tool.

Regards,
Kharis

Kharis hi,

Thanks for the tip. I validated the code, I only got 2 errors:

Sorry! We found the following errors (2) URI : TextArea 12 The @charset rule may only occur at the start of the style sheet. Please check that there are no spaces before it. @charset "UTF-8"; 13 @import are not allowed after any valid statement other than @charset and @import. @import url("../sydney/style.css");

But these are just the first lines after the header comments, no spaces before them, and import is just after charset, so these errors must be an error! No other errors or warnings reported.

Also, all other CSS apart of your lines are working perfectly…