Menu bar

Hi,
My website is http://rnsenjoylife.com/, is the possible to change the menu style to align center and the a background color to it like this website here http://www.apple.com/ ?? (with CSS)

Regards,
Raymond

Hi,

Yes its possible, you can centered the menu from Customizer > Header area > Menu style. Then add the css code below using simple custom css plugin:

.site-header {
    background-color: black;
    padding: 5px 0;
}

.site-log{
   display: none;
}

Regards,
Awan

Hi,
Thank you for that.
However how can I move the menu bar towards the top as you can see there’s a gap between from the top of the page to the menu.
Also how can I spread my menu item across the page evenly, as now it just all in the center.
Regards,
Raymond

Hi,

Here is the css code to remove the space in above of the menu:

.site-header .col-md-4.col-sm-8.col-xs-12 {
    display: none;
}

And you can adjust the value of the margin-left in the css code below to spread your menu items:

#mainnav ul li {
    margin-left: 50px;
}

Regards,
Awan

Hi Awan,

Thanks for your help, however if you have a look here: http://rsenjoylife.com/ , the “about us” is on the next line, how can I put that on top with the same margin?

Plus I would like to add more menu items there, how can I make sure all menu items stay on top?

is there top and bottom padding for “.site-header .col-md-4.col-sm-8.col-xs-12”, so there’s a bit more space from the menu?

Regards,
Raymond

Hi Awan,

I’m also trying to make the slider image smaller, with the following css code, however it doesn’t work, please help.

.header-slider #slideshow{
height: 700px;
}

Regards,

Raymond

Hi Awan,
You can ignore my questions that was asked March 24, 2016 at 7:03 am #266818. Thanks

Hi,

Currently, your slider height is set to 653px. and to reduce it, you could use this code instead:

.header-slider {
    height: 500px !important;
}

Hi Awan,

Thanks for your help, really appreciate it.

Regards,

Raymond