How to centralise the Tagline

Hello Jen,

Can you please provide a link to your website and some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hi Roman,

What I mean is – it seems that the menu bar is divided, with about 1/3 on the left hand side where the Tagline goes, and then 2/3 on the right hand side where the menu items go (and because I’ve got a lot of menu items they are spilling onto two lines which I don’t like). What I’d like to do is remove the 1/3 for the Tagline and have the menu items stretching across the full width of the menu bar – is this possible?

Thanks,
Jen

Hello Jen,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

div.site-branding {
    display: none;
}

nav#site-navigation,
nav#site-navigation.main-navigation ul {
    width: 100%;
}

Kind Regards, Roman.

Hi Roman,

Thanks for this, however the menu has now shifted to the left hand side and is still over 2 rows, whereas it should fit on one row – you can see the effect at https://www.businessowl.uk

I think the code needs a slight tweak?

Thank you,
Jen

Hello Jen,

Please replace this CSS code in your Simple Custom CSS:

nav#site-navigation,
nav#site.navigation.menu-naviation ul {
}
@media only screen and (max-width: 767px) {
  #sidebar-footer .sidebar-column:nth-child(2) {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  #sidebar-footer .sidebar-column:nth-child(3) {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

…with this:

nav#site-navigation,
nav#site-navigation.main-navigation ul {
    width: 100%;
}

nav#site-navigation.main-navigation li {
    float: right;
}

@media only screen and (max-width: 767px) {
    #sidebar-footer .sidebar-column:nth-child(2) {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

Kind Regards, Roman.

Thank you Roman.

That’s perfect for the footer widgets.

Re. the menu, it’s now on one line which is great but it’s over to the right rather than centered, I tried to replace the word ‘right’ with ‘centre’ but this didn’t do anything. Also, the menu items are reversed, so reading left to right it starts with the last item. I thought about re-ordering the items back to front so make it right, however the menu items in the dropdown are correct as it stands now, so I presume if I re-order the items, the dropdown will then be wrong. Are we able to correct this?

Thank you, nearly there now!

Jen ??

Hello Jen,

Please replace this CSS code:

nav#site-navigation.main-navigation li {
    float: right;
}

…with this:

nav#site-navigation.main-navigation {
    text-align: center;
}

nav#site-navigation.main-navigation li {
    float: none;
    display: inline-block;
}

Kind Regards, Roman.

That’s absolutely perfect, thank you so much – I think I must owe you a drink (you probably need one after all the help you have given me!).

I will try to leave you in peace now!

Thanks again,
Jen

That’s okay Jen, you are welcome ??

Kind Regards, Roman.