How To Move Logo In Center & Move Menu Below It

Hello ??

You can use this CSS to center the logo and menu that way:

.title-info {
  width: 100%;
  text-align: center;
}
.site-header .site-description {
  position: static;
  text-align: center;
}
@media all and (min-width: 800px) {
  .menu-primary-items,
  .menu-unset {
    text-align: center;
    clear: left;
    margin: 0 auto;
  }
}

It will work right away once added to the “Additional CSS” section in the Customizer. You can find lots of other snippets for customizing Tracks in the CSS snippets collection too.

Thank you so much Ben! That worked perfectly. ??

But the tagline below the logo gets hidden inside the menu on smaller screens. I want it to show on all screens, including mobile. What css should I add for that?

Due to the way the tagline is added to the menu, I’m afraid it can’t be moved below the menu on mobile.

No, not below the menu. I am saying the tagline is hidden inside the menu. I want to display it below the logo instead – all times.

Menu inactive: screenshot 1 – https://puu.sh/wdplB/29bc50e9f3.png
Menu active: screenshot 2 – https://puu.sh/wdpn7/880765433f.png

I hope this is possible to do?!

• This reply was modified 7 years, 5 months ago by WPgeeks.

I’m sorry, that’s what I meant to say. The tagline is placed within the menu for mobile devices, so it can’t be easily moved below the logo with CSS.

• This reply was modified 7 years, 5 months ago by Ben Sibley.

Oh. I will try seeking help from a developer friend since I want it that way.

But I have an idea for now. What if I add a ‘new tagline code’ for screens that show the mobile menu? That way, it will show the ‘new tagline’ when mobile menu is active, and on desktop the original one will show. Is that doable?!

Thanks for taking the time to answer my questions Ben. ??

To move it, you’d want to add a “child theme” to the site. If you’re not using one already, there’s a download and some basic instructions here.

You can copy menu-primary.php and header.php from Tracks into the child theme. Then copy the tagline in menu-primary.php into the header.php file and remove it from menu-primary.php. Then it can always display below the logo and won’t be included in the menu.

Oh, okay. I think it will be easier now. Thanks so much for all your help! Really appreciate it. You’re a very kind person Ben. ??

Thanks! Happy to help ??