centering header

Thanks for using Tracks!

Would you want to center the logo, menu items, or both?

I found in this forum the code to center the logo, so that’s solved ?? Now I want to center menu items and the short description (below the logo)

Thanks!!!

Okay cool, you can use this CSS to center everything like that:

@media all and (min-width: 50em) {

  .site-header {
    text-align: center;
  }
  .site-description {
    position: static !important;
    margin: 0 auto 1.5em;
    text-align: center;
  }
  .title-info {
    float: none;
  }
  .menu-primary-items {
    margin: 0;
    text-align: center;
  }
}

I’ve included a bit in there to center the logo as well, so you can replace the existing CSS with this snippet.

Does it work in the website if it’s visited with a smartphone? I’m having troubles with that! (logo is centered in the site when I visit the homepage with my browser and Windows, but if I check out the page from my phone, I just see the logo just in the left!

I know it is a responsive theme but I realized too that the centered elements don’t always match in the ‘symmetrical axis’ of the page, depending on the screen resolution of the PC, I think. Could be? (I hope I’m expressing myself well, not native English, sorry)

Thank you for your help!

• This reply was modified 7 years, 10 months ago by btaguiar.
• This reply was modified 7 years, 10 months ago by btaguiar.

You know what, I wrote the code to only affect the desktop screen widths, but it can work for mobile too.

Please switch to the following CSS instead:

  .site-header {
    text-align: center;
  }
  .site-description {
    position: static !important;
    margin: 0 auto 1.5em;
    text-align: center;
  }
  .title-info {
    float: none;
  }
  .menu-primary-items {
    margin: 0;
    text-align: center;
  }
  .toggle-navigation {
    float: none;
  }

If everything isn’t exactly centered, could you share a link to your site?

Just a last issue:

With my resolution (1600 x 900), in a page, the elements (logo, menu, title of the page) are not aligned. With the rest of resolutions it works properly.

That’s the last question we think hahahaha Thank you so much for your support ??

View post on imgur.com

https://remontando.es/quienes-somos/

Ah I see. Thanks for the link. Please update to this CSS and it should fix the alignment for wide screen displays:

.site-header {
    text-align: center;
    margin: 0 auto;
    max-width: 1280px;
  }
  .site-description {
    position: static !important;
    margin: 0 auto 1.5em;
    text-align: center;
  }
  .title-info {
    float: none;
  }
  .menu-primary-items {
    margin: 0;
    text-align: center;
  }
  .toggle-navigation {
    float: none;
  }

It worked fine! Thank you so much!

We’re already done with our web design. Just trying to change the search buttom colour (I’m trying texting some CSS in the editor but I can’t find what I can replace, furthermore I just saw you used Font Awesome and it doesn’t appear the symbol, I think). Now, I don’t know why, we get a white box.

And we just visited the page from a mobile phone and we realized the main menu isn’t showed in the web, just only the secondary menu or the footer menu, I’m not sure if it’s because of your desing.

Another little problem I just realized,

At meta-author, can’t find how to solve this:

And the search bar issue I said before.

I’m so happy with the Tracks theme. I’ll use in other webpages too.

• This reply was modified 7 years, 10 months ago by btaguiar.
• This reply was modified 7 years, 10 months ago by btaguiar.

Great, glad to hear that!

This CSS will give fix the author name display and make some updates to the search form. I grabbed an orange shade from one of the images as an example, but the color can be switched to anything. The button text itself is white which is why it can’t be seen right now.

.author-meta a {
  white-space: nowrap;
}
.site-footer .search-form-container .search-submit {
  background: #EAAE5E !important;
}
.site-footer .search-form-container .search-field {
  margin-right: 0 !important;
}

As for the primary menu, it should be visible after clicking the menu toggle button to display it: https://pics.competethemes.com/kDuV

Yes! The menu toggle button was white before, so I couldn’t figure that it was there hahaha. Thank you! Your support is amazing, better than some expensives templates made by huge companys.

Thanks for the kind words! I’m happy to help.