how to centre site title, tag line and main navigation menu

Hey there radhika297, Hope you’re well today!

This could be done with some custom CSS. Since you already created child theme try adding the following code to child theme style.css:

.site-branding {
float: none;
text-align: center;
}

#main-navigation .sf-menu {
text-align: center;
height: 50px;
}

#main-navigation .sf-menu ul {
display: inline-block;
}

This should center your site title, tag line and the navigation.

Best regards,
Bojan

I tried this code, and it does center the main navigation menu. However, I don’t want the blog of color which automatically comes behind it.

I can get rid of the block by taking out the “block” in “display: inline-block” but then it goes back to being left-justified. Not sure why one is affecting the other.

https://www.pinesandpalmettos.com/

Hi there pinesandpalmettos

Can you try this CSS snippet for the menu:

#main-navigation .sf-menu ul {
    background: transparent;
    display: inline-block;
}

Let us know if this does the trick. ??

Thanks,
Ivan

That did it! Thank you so much =)

hi bojan.,

the site title is still not in the centre. iTs still left aligned. the main nav menu is now centre aligned.. thanks!

how else can i centre align the site title? i tried the code you suggested:

.site-branding {
float: none;
text-align: center;
}

also, the sub-menu is centre aligned now. I want the sub-menu to be left-aligned.
please see the link->

thanks

https://www.thestyleaddict.in

Hey there radhika297,

Please replace the code I gave you for the site tile with this one:

#masthead .site-branding {
float: none;
text-align: center;
}

.sub-menu li a {
float: left !important;
}

The second part should align the sub menu links to left. Normally I wouldn’t suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles.

Hope this helps ??

Best regards,
Bojan

It worked !! :)))

thank you so much.

Glad I could help ??

Cheers,
Bojan