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,
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….
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
Let us know how you get on
Magus
Marvelous! Perfect solutions for both!
Thanks a lot! If you’re ever in Ecuador let me know ;)
No problem
If you need any more help don’t hesitate to start a new Thread
All the best
Magus
@Magus much appreciated :)