Page 1 of 1
Cassiopeia: how to center items in Main Menu?
Posted: Fri Sep 30, 2022 9:46 pm
by bmassaer
In the Main Menu of Cassiopeia, I would like to align the menu-items centrally; now they are aligned left. I read that I should add "center" after class suffix, but I cannot find this option.
How can I align the menu items centrally?
www.thegoosething.com
Re: Cassiopeia: how to center items in Main Menu?
Posted: Fri Sep 30, 2022 9:53 pm
by sozzled
What menu? I don't see any menu(s) at that URL.
Re: Cassiopeia: how to center items in Main Menu?
Posted: Fri Sep 30, 2022 10:00 pm
by bmassaer
The "main menu" is with the logo "The Goose Thing". I would like to have it centered.
I will add more menu items so it's more clear!
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 12:23 am
by sozzled
I spent about 30 minutes experimenting with CSS to obtain what you have asked for but I had to give up. I wasn't happy with any of the approaches that I tried working with the way you've arranged things at your website. I'm sure it's possible to get what you want using Cassiopeia but you'll have to be patient and either (a) try something yourself, or (b) wait for someone else to offer you suggestions.
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 2:21 am
by ceford
You can't do what you want using the method you are trying. You should convert the logo-wit.jpg image to an svg and use it in place of the Cassiopeia logo (it should have been a png rather than a jpg image). Then use a two item menu and don't bother trying to put the items on either side of the logo.
I suppose you could use three modules side by side, two separate menu modules on either side of a module containing the logo. You will need a better grasp of css!
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 5:33 am
by Maradona
Is this what you're trying to achieve?
CENTER.png
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 5:41 am
by sozzled
That's brilliant, @maradona, but it's not quite right. @bmassaer, add these lines to the end of your user.css:
Code: Select all
.container-nav {
justify-content: center !important;
}
That's all you need.
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 9:22 am
by sozzled
I thought this was so good to know, I wrote this up as an article.
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 11:48 am
by bmassaer
You ar brilliant indeed! Thank you so much...
Bart
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 5:46 pm
by Maradona
sozzled wrote: ↑Sat Oct 01, 2022 9:22 am
I thought this was so good to know, I wrote this up as an article.
Can we have the link to the article?
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sat Oct 01, 2022 6:57 pm
by sozzled
@maradona: I'm not permitted, under the forum rules, to post links to the articles I write—it would be called "self-promotion"—but it you might find it on Twitter.
Re: Cassiopeia: how to center items in Main Menu?
Posted: Sun Aug 20, 2023 9:28 am
by Duckdown
sozzled: I entered the code you added above to centre my top menu but nothing happened. I took just the justify part and put it under the ul. as below. That worked for me. Perhaps that is because I assigned the menu to position menu?
Thanks. Your code put me in the right direction for what I wanted to achieve.
ul.mod-menu, ul.mod-menu_dropdown-metismenu button {
font-weight: bold;
justify-content: center !important;