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

[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 8 months ago.

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

    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;


    .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;

    .page .entry-header,
    .single .entry-header {

    .entry-content {
    margin: 0;

    .main-navigation .sticky-logo,
    .main-navigation .sticky-logo img {
    height: 150px;
    padding-left: 40px;
    padding-top: 0px;


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

    @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.


    Lead Developer

    It should be as simple as this:

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

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


    Code added but nothing is changed.
    This is the site:


    Lead Developer

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

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


    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 img {
    height: 50px;

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


    Lead Developer

    This should be your CSS:

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

    This work correctly!
    Thanks and great support as ever!


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

You must be logged in to reply to this topic.