Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

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

Home Forums Support Custom css for mobile logo don't work

This topic contains 7 replies, has 2 voices, and was last updated by  Tom 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #385170

    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.

    #385426

    Tom
    Lead Developer

    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?

    #385464

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

    #385491

    Tom
    Lead Developer

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

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

    #387220

    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.

    #387406

    Tom
    Lead Developer

    This should be your CSS:

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

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

    #387693

    Tom
    Lead Developer

    Glad I could help! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.