Docs

[truaxbrandingco]

Hey there!

Theme is amazing btw! I wanted to center the logo on mobile.

URL is: http://50.87.248.168/~inertiat/

Please help. Thank you!

best,

Nate

[Friech]

Hi Nate,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.x-navbar .x-brand {
		margin-left: auto;
	    margin-right: auto;
	    float: none;
	}
}

Hope it helps, Cheers!

[Rad]

Hi Nate,

Thanks for posting.

Please switch to stacked navigation at Admin > Appearance > Customizer > Header > Navbar

Cheers!

[truaxbrandingco]

Hi there

Thanks for the response. none of that helped. On mobile the logo is not centered using the CSS. With the stacked option it centers the logo on full screen which I don’t want.

Thank you~

Nate

[Rue Nel]

Hello Nate,

The given code above should have work to center your logo on mobile screen. Could you please update it and use this code instead:

@media (max-width: 979px) {
  .x-navbar .x-brand {
    margin-left: auto;
    margin-right: auto;
    float: none;
  }

  .masthead-inline .x-btn-navbar {
    position: absolute;
    right: 0;
    top: 0;
  }
}

And you should have something like this:

Hope this helps.

[truaxbrandingco]

Hey guys

On mobile the logo goes up behind the top header. I would like it to be below the text. Can you help with this?

Thank you!

Nate

[Rue Nel]

Hello Nate,

The logo goes behind the top header because you have added a code that position it as absolute. Please find this block in your customizer,

.x-topbar {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    width: 100%;
    border-bottom: 0;
}

You need to update the code and use this instead:

.x-topbar {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    width: 100%;
    border-bottom: 0;
}

@media(max-width: 979px){
  .x-topbar {
    position: relative;
  }

  .site .x-brand img {
    padding-top: 5px;
    margin-bottom: 15px;
  }
}

Please let us know if this works out for you.

And by the way, I found out that you have inserted an invalid code as well. Please remove the php code you have added.

You need to place that code in your child theme’s functions.php file if you have one. To know more about child themes, please check it here: https://community.theme.co/kb/how-to-setup-child-themes/

Hope this helps.

[truaxbrandingco]

Hey there

Thanks for the response. Still didn’t do the trick if you look on mobile.

Any other suggestions?

Best,

Nate

[Rue Nel]

Hello Nate,

Thanks for the updates! Regretfully I could not see the given css on the page. Did you already remove it? And upon checking you custom css, it is a bit of a mess. Kindly edit it and organize it a bit. You can make it like this format:

/* Topbar adjustments */
.element {
  //some styling here
}

/* Navbar adjustments */
.element {
  //some styling here
}

/* Footer adjustments */
.element {
  //some styling here
}

/* All @media block should always be at the bottom of all your other css */
@media(max-width: 979px){
  .element {
    //some styling here
  }
}

The code above is just an example which would serves as a guide on how you can organize the given css from our staffs.

Hope this helps.

[Author]

Posts