Home>Support>CSS for centering menu text stopped working…

CSS for centering menu text stopped working…

By Rincón d'Olón, 9 years ago. Last reply by Daniel, 9 years ago.

Hi,
After the update the following css does not center my menu links anymore.
Is there an alternative code?
Thanks

/* MENU */
.main-navigation ul {
text-align: center;
}
.main-navigation ul li {
display: inline-block;
float: none;
}
.main-navigation a {
font-family: ‘Open Sans’, sans-serif;
font-size: 18px;
}

ps Bonus question about CSS in general: is it possible to shorten the code?

I have:

#pg-21-0 {
margin-bottom: 0px;
}
#pg-21-1 {
margin-bottom: 10px;
}
#pg-21-2 {
margin-bottom: -45px;
}
#pg-21-3 {
margin-bottom: -10px;
}
#pg-21-4 {
margin-bottom: 10px;
}
#pg-21-5 {
margin-bottom: -25px;
}
#pg-21-6 {
margin-bottom: -25px;
}
#pg-21-7 {
margin-bottom: -25px;
}
#pg-21-8 {
margin-bottom: -25px;
}
#pg-21-9 {
margin-bottom: -25px;
}
#pg-21-10 {
margin-bottom: -25px;
}
#pg-21-11 {
margin-bottom: -25px;
}
#pg-21-12 {
margin-bottom: -25px;
}
#pg-21-13 {
margin-bottom: -25px;
}
#pg-21-14 {
margin-bottom: -25px;
}
#pg-21-15 {
margin-bottom: -25px;
}
#pg-21-16 {
margin-bottom: -25px;
}
#pg-21-17 {
margin-bottom: -25px;
}
#pg-21-18 {
margin-bottom: -25px;
}
#pg-21-19 {
margin-bottom: -45px;
}
#pg-21-20 {
margin-bottom: -25px;
}
#pg-21-21 {
margin-bottom: -50px;
}
#pg-21-22 {
margin-bottom: 0px;
}
#pg-21-23 {
margin-bottom: -50px;
}
#pg-21-24 {
margin-bottom: -35px;
}
#pg-21-25 {
margin-bottom: -35px;
}
#pg-44-0 {
margin-bottom: -10px;
}
#pg-44-1 {
margin-bottom: -55px;
}
#pg-56-0 {
margin-bottom: -45px;
}

and I want something like:
#pg-21-1 #pg-21-4 {
margin-bottom: 10px;
}
#pg-21-0 #pg-21-22 {
margin-bottom: 0px;
}
#pg-21-3 #pg-44-0 {
margin-bottom: -10px;
}
#pg-21-5 #pg-21-6 #pg-21-8 #pg-21-9 #pg-21-10 #pg-21-11 #pg-21-12 #pg-21-13 #pg-21-14 #pg-21-15 #pg-21-16 #pg-21-17 #pg-21-18 #pg-21-20 {
margin-bottom: -25px;
}
#pg-21-24 #pg-21-25 {
margin-bottom: -35px;
}
#pg-21-19 #pg-56-0 {
margin-bottom: -45px;
}
#pg-21-21 #pg-21-23 {
margin-bottom: -50px;
}
#pg-44-1 #pg-21-7 #pg-21-2 {
margin-bottom: -55px;
}

but obviously that does not work…

I tried it with commas too, and without the #… But I’m not familiar with the CSS syntax, I guess….

URL: http://www.rinconolon.ec

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

  1. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Rincon

    Please add the following code to your Custom CSS for the menu alignment

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

    To tidy up your bottom margin code you should be able to use this

    #pg-21-1, #pg-21-4 {
margin-bottom: 10px;
}
#pg-21-0, #pg-21-22 {
margin-bottom: 0px;
}
#pg-21-3, #pg-44-0 {
margin-bottom: -10px;
}
#pg-21-5, #pg-21-6, #pg-21-8, #pg-21-9, #pg-21-10, #pg-21-11, #pg-21-12, #pg-21-13, #pg-21-14, #pg-21-15, #pg-21-16, #pg-21-17, #pg-21-18, #pg-21-20 {
margin-bottom: -25px;
}
#pg-21-24, #pg-21-25 {
margin-bottom: -35px;
}
#pg-21-19, #pg-56-0 {
margin-bottom: -45px;
}
#pg-21-21, #pg-21-23 {
margin-bottom: -50px;
}
#pg-44-1, #pg-21-7, #pg-21-2 {
margin-bottom: -55px;
}

    Just remember to remove or comment out the existing CSS for the bottom margins. You comment out like this

    /*
your css code...
*/

    Let us know how you get on

    Magus

    • 9 years, 5 months ago Rincón d'Olón

      Marvelous! Perfect solutions for both!

      Thanks a lot! If you’re ever in Ecuador let me know ;)

  2. 9 years, 5 months ago Magus
    Hi, I Work Here

    No problem

    If you need any more help don’t hesitate to start a new Thread

    All the best

    Magus

  3. 9 years, 5 months ago Daniel
    Hi, I Work Here

    @Magus much appreciated :)

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