Centering side bar navigation fonts

I would very much like to center my navigation links in my side bar in the Supply template, much like you can in the Wells template.

I have been told I need to add the code:

.menu-block .menu-selector {
margin-bottom:  3em
text-align: center
}

into my CSS. When I do it suggests that there is an error in line two.

Any suggestions on how to center the navigation links? SQSP purports to be user friendly and that one can adjust code and setting to suit one's desired look, but no having much luck thus far.

Many thanks

Mike

28 minutes ago, sanonyme23 said:

into my CSS. When I do it suggests that there is an error in line two.

This code is missing semi-colons after each line:

.menu-block .menu-selector {
  margin-bottom:  3em;
  text-align: center;
}

Hi Ziggy,

'Crunch buckets' as no-one says. Thanks for the tip. I will be trying this out shortly (currently travelling, France, Spain and back to Maroc, so it might take a day or two. Very excited to have a possible solution. The first suggest came from a Fès based web guy, but without any mention of semi-coli. Cheers. مايك

sadly still no joy. Added suggested code, but nothing. Perhaps I am not compiling/saving code to properly add it? I had presumed changes to CSS would automatically bee saved and compiles. Hmmmm.

Are you trying to make lasting changes to your website via chrome developer tools?

I was attempting to make lasting changes on a copy of my website (safe not sorry) and was trying to use Safari/Firefox's source code pane to add the additional info. I am not intimately aware of how to approach this in Safari let alone Chrome!

Should I just be using the Custom CSS window the the SS website tools? If so how to save/compile - I can enter the code but not sure how to get my website to display and save the changes. Cheers.

6 minutes ago, sanonyme23 said:

Safari/Firefox's source code pane

This only allows you inspect a website and test locally, the changes are only visible to you, and as soon as you refresh the page those changes disappear.

8 minutes ago, sanonyme23 said:

Should I just be using the Custom CSS window the the SS website tools? If so how to save/compile - I can enter the code but not sure how to get my website to display and save the changes.

Yes, you need to use Custom CSS. The changes are live, and 'compiled' once you save.

All I have done so far is to bug check the code you initially shared, I don't know if it works because I don't know exactly what you want to achieve or where (website/page URL).

Ziggy, thanks for this further info.

What I am hoping to achieve is to have the  'navigation' links in my side bar, across my entire site, display as centered rather than display as left justified as is currently  the case.

sanonyme.com

cheers

What it looks like you are asking for is centering by-eye, you're moving the entire navigation to the right to align the first piece of text, you could try using this Custom CSS, and tweaking the value until you're happy with it:

#header .navigation, .navigation-secondary {
    margin-left: 1.5em;
}

Do you want to have the text center-aligned?

Hi Ziggy, I would be interested to have the possibility of centre aligned navigation menu text, if only to compare and contrast with the "margin left" option of 'faux' centring with its attendant display of the nested items.

Mike

Try this Custom CSS to center all of the navigation text:

.navigation, .navigation-secondary {
    text-align: center;
}