Home>Support>How to change menu to centre alligned

How to change menu to centre alligned

By Lauren Short, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi there,

I am using the free vantage theme and have created a child theme. I have my main navigation bar and I want to make some changes to it. I would like to change the background colour/text colour/hover colour etc, and also make the buttons on the bar centre alligned rather than left aligned. Where in the style sheets/function sheets do I need to do this?

Many thanks in advance for any help

(I’m also building my site on a local server because I’m a beginner and want it to look nice before it goes live)

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Lauren

    Here is how you can center the main menu. Be sure to paste the CSS listed below into a Custom CSS plugin or module like the one included with Jetpack:

    /* Vantage center align the main menu */

.main-navigation ul {
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
}

.main-navigation ul ul li { 
text-align: left;
}

    The menu colors are included in the Premium theme under Appearance > Customize. If you’d like to consider that offering you can do so under Appearance > Premium Upgrade. If you want to make those changes using Custom CSS the selectors are:

    /* Vantage Menu Colors */

.main-navigation {
background: #343538 !important;
}

.main-navigation a {
color: #e2e2e2 !important;
}

.main-navigation ul li:hover > a {
background: #00bcff !important;
color: #FFFFFF !important;
}
  2. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Please keep the following in mind for moving your site running Page Builder content:

    https://siteorigin.com/thread/id-like-to-move-my-website-thats-using-page-builder-whats-the-best-method/

  3. 10 years, 9 months ago Lauren Short

    That’s so great thank you Andrew the colour and the centre align worked perfectly. Only things that didn’t change for colour is the little magnifying glass for the search bar and the drop down for sub menus. Any ideas?

  4. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped.

    Here is a snippet for drop downs:

    /* Vantage - Adjust color and opacity of drop down menu items and drop down menu hover */

.main-navigation ul ul { background: rgba(200, 54, 54, 0.5) !important;  } 
.main-navigation ul ul li:hover > a { background: rgba(200, 54, 54, 0.5) !important;  }

    That was written for a particular request. You can remove the RGBA property and replace it with a hexadecimal color if you don’t want to use the opacity value.

    The menu search selectors are as follows:

    /* Vantage Menu Search Selectors */
#search-icon #search-icon-icon { background-color: #dd3333 } 
#search-icon #search-icon-icon .vantage-icon-search { color: #dd9933 } 
#search-icon #search-icon-icon:hover .vantage-icon-search { color: #8224e3 } 
#search-icon .searchform { background-color: #000000 } 
search-icon .searchform input[name=s] { color: #1e73be }

    The above are all featured under Appearance > Customize in our premium version.

  5. 10 years, 9 months ago Lauren Short

    Thanks Andrew – I am seriously considering upgrading to premium. I am just having a bit more of a play around to make sure it’s definitely the right theme… and also this is great help as a newbie in CSS!

    Thanks so much for your fast replies as well

  6. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    For sure. That’s the idea with the process. Be happy, before upgrading.

    All the best with your site.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More