CSS for centering menu text stopped working…

Resolved 4 replies premium theme theme-vantage

10 years ago · Last reply by Daniel 10 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.

Need fast email support? Get SiteOrigin Premium

#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; }

Replies

Magus Staff 10 years, 10 months ago

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

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

Rincón d'Olón 10 years, 10 months ago
Marvelous! Perfect solutions for both!
Thanks a lot! If you’re ever in Ecuador let me know ;)

Magus Staff 10 years, 10 months ago
No problem
If you need any more help don’t hesitate to start a new Thread
All the best
Magus
Daniel Staff 10 years, 10 months ago
@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.