Docs

[stuartrowens]

Site: titan-premier.com

I have the following CSS on my site to achieve an overlapping effect with my logo:

@media (min-width: 980px) {
	body.x-navbar-fixed-top-active .x-navbar-wrap {
	height: 60px;
	position: relative;
	z-index: 99999;
	}
	.x-navbar:not(.x-navbar-fixed-top) .x-brand {
	position: absolute;
	z-index: 999;
	top: -30px;
	}
}

I think what I’d like is for the theme to ignore that code and just use the default settings for the navbar and menu on mobile devices. My desired outcome is that the logo would be roughly the same height as the menu button, inline with the button, and aligned to the left. I’ve looked through the forums and can’t seem to find an answer. Any ideas?

[Joao]

Hi There,

This code just affects devices which are larger the 980px so it pretty much just affects laptops and desktop computers.

To adjust the size of your logo on mobiel devices. you can use

@media (max-width: 500px) {
.x-brand img {
      width: 200px;
    padding-top: 20px;
    margin-top: 12px;
    margin-bottom: 12px;
  } }

Hope it helps,

Joao

[stuartrowens]

Joao,

Thanks. I’ve added the code but it doesn’t seem to have helped. It looks like I didn’t give you the full code that’s manipulating my logo. In addition to resizing, we’re also changing its position on the navbar:

@media (min-width: 980px) {
	body.x-navbar-fixed-top-active .x-navbar-wrap {
	height: 60px;
	position: relative;
	z-index: 99999;
	}
	.x-navbar:not(.x-navbar-fixed-top) .x-brand {
	position: absolute;
	z-index: 999;
	top: -30px;
	}

This is causing it to display like this on mobile:

What we’d like to do is make the logo inline with the menu button so that the mobile navbar size is reduced. Sorry for my mistake in the originial post.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.x-navbar a.x-brand.img {
    max-width:150px;
    margin: 10px 0;
}}

Hope that helps

[stuartrowens]

Paul, thanks for the help. I’ve added the CSS but it doesn’t seem to have affected anything.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[stuartrowens]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials. To clarify, see attached screenshot. Is that what you want to achieve?
From what I can see, you have the following custom CSS:

@media (max-width: 979px){
   a.x-brand.img img {
       display:none;
   }

   a.x-brand.img {
       display:block;
       background:url('http://titan-premier.com/wp-content/uploads/2016/06/Titan-Logo-50.jpg') top left no-repeat;
       width:300px;
       height:50px;
   }

First, that media query is missing it’s closing curly braces. Then it hides the main logo that’s why our suggested code is not working. If the attached screenshot is what you want, please remove above custom CSS. Then update this custom CSS:

@media (max-width: 979px) {
..x-navbar a.x-brand.img {
    max-width:150px;
    margin: 10px 0;
}}

To this:

@media (max-width: 979px) {
.x-navbar a.x-brand.img {
    max-width:170px;
    margin: 10px 0; /* This will add top and bottom margin. Feel free to remove if you want the space*/
}
}

The double dot from this line ..x-navbar a.x-brand.img { will cause an error and you have hide that element that’s why is not showing before.

Hope this helps.

[stuartrowens]

That’s perfect and did the trick. Thank you!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts