[Resolved] Custom css for mobile logo don't work

[recchia]

Hi,
I’m trying to use a custom css and make the mobile logo bigger, but after several attempts, I don’t have results yet.
Maybe there are conflicts with other css codes?

Tried with:

.mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
height: 40px;
}

or

.mobile-header-navigation .mobile-header-logo img {
height: 35px;
}

and many others codes, found on this forum, starting with: “@media” (i’m not a programmer so excuse me if i’m inaccurate)

I tried also hiding logo (just an experiment) with this:

@media (max-width: 768px) {
.site-logo {
display: none;
}
}

but the logo was still there.
So i thought that might be a conflict with other code.
This is the whole custom css added for other things:

/* HIDE FOOTER */
.site-info {
display: none;
}

/*HIDE PAGE TITLE*/
.page .entry-header,
.single .entry-header {
display:none;
}

/*HIDE WHITE BAR ON TOP*/
.entry-content {
margin: 0;
}

/*SIZE/POSITION DESKTOP LOGO*/
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 150px;
padding-left: 40px;
padding-top: 0px;

}

/*POSITION MENU*/
@media (min-width: 769px ) {
.site-branding {
display: inline-block;
}
.site-logo {
float: CENTER;
margin-right: -140px;
}
}

/*COLORS MENU MOBILE*/

@media ( max-width: 768px ) {
.main-navigation {
background-color: #12109a;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
color: #ffffff;
}
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a {
color: #12109a;
background-color: #ffffff;
}
}

So after all, what i want is choose size and position of logo for tablet and smartphone ’cause desktop version is ok.
Thanks in advance for your support and patience.

[Tom]

It should be as simple as this:

.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 100px;
}

Can you add that and then link me to your site so I can see why it’s not working?

[recchia]

Code added but nothing is changed.
This is the site: to-hair.it/site/
Thanks

[Tom]

Ah, you’re not using the mobile header option.

This would be your selector: .main-navigation .site-logo.navigation-logo img

[recchia]

Hi Tom,
I tried with mobile header option but, once again, nothing is changed.
If can be useful for you, i’m not using the logo located in “site identity” but the right one is in layout > primary navigation. So what i have to modify, is the last one.

What we have now is:

.main-navigation .site-logo.navigation-logo img
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 50px;
}

I really don’t know why no one of this codes works correctly…
Thank you again Tom.

[Tom]

This should be your CSS:

.main-navigation .site-logo.navigation-logo img {
    height: 50px;
}

[recchia]

This work correctly!
Thanks and great support as ever!
Regards!

[Tom]

Glad I could help! 🙂

[Author]

Posts