Customize header width and header menu

Sparkling
1

Hi all.

I have two questions about how to change some properties of the header (logo and menu):

  1. Can i make all the header narrower or wider?. If so, how ?

  2. Now considering only the menu in the header, i want to change background color of the item when is selected or on hover, but not the text, just the background of it like a button.
    Something exactly like in your site https://colorlib.com/

This kind of changes can be done adding CSS rules on the Theme Options -> Other -> Custom CSS?

Thanks!

2
  1. here is example code that will make header 100px wider:
@media (min-width: 1200px) {
    .navbar .container {
        width: 1270px;
    }
}

You can tweak width back and forth to get the results you were looking for. This code can be added in Theme Options - Other - Custom CSS.

  1. This code won’t work via Custom CSS field available via Theme Options but you can use Custom CSS field which comes with Jetpack plugin. I highly recommend this plugin to everyone and it is also built by Automattic the same team which is behind WordPress itself. http://wordpress.org/plugins/jetpack/ 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important; 
}

You can change color codes to get the results you were looking for.

3

Thanks for your help.

I had success with mi question 2.

About the first… I make the wrong question with: “header width”. I really meant HEADER HEIGHT (it was too late and english is not my native lang) … I apologize.

4

It is possible to change height but it really depends on your website setup. Again this code can be used via Child Theme style.css or inside Jetpack’s Custom CSS field.

.navbar-nav > li > a {
    padding-top: 30px;
    padding-bottom: 30px;
}
.navbar > .container .navbar-brand {
    margin: 23px 0;
}

It might not work for you if you have logo or some other setup. I don’t see your website, so I used my demo website as example to write this code.