Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #385170
    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.

    #385426
    Tom
    Lead Developer
    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
    recchia

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

    #385491
    Tom
    Lead Developer
    Lead Developer

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

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

    #387220
    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.

    #387406
    Tom
    Lead Developer
    Lead Developer

    This should be your CSS:

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

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

    #387693
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.