Regarding Text Alignment of 'Site Title' & 'Menu Icon' on Mobile View

Hello,
I’ve been using Ignis theme for years, still loving it.

I needed some help, I learned that these two CSS codes (shown in below) will make ‘site title’ to align left and ‘menu icon’ to align the right side of the page on mobile view. But on my website, site title has two words so it shows parallelly instead of one single line…

1:

.site-header, .site-branding {
display: flex;
}

2:

.site-branding, .btn-menu {
text-align: right;
}

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 500px) {
        .site-header {
          position: relative;
        }
        .site-branding {
          position: absolute;
          top: 35px;
          left: 10px;
        }
    }

Regards,
Kharis

1 Like

Hello,
I added the CSS code and it worked. Thank you! :slight_smile:
Now there’s a small issue, this CSS code is causing a scroll bar at the bottom of the page? Is there any way to fix it?

Screenshot: https://drive.google.com/file/d/156yZTte9urM9jiHU2vcGVkJsIdw1cVDl/view?usp=sharing

You’re welcome!

Try adding this CSS code:

    html,
    body {
       overflow-x: hidden;
    }

Regards,
Kharis
aThemes Support

1 Like

Great, now everything working fine but one small issue that, on mobile view alone, I cannot go back to homepage if I click the ‘.site-title’.

Facing this issue after adding this following CSS code:

@media only screen and (max-width: 500px) {
    .site-header {
      position: relative;
    }
    .site-branding {
      position: absolute;
      top: 35px;
      left: 10px;
    }
}

Can you check my website, ‘.site-title’ hyperlink not working on Mobile View alone.
Thank you!

Hello there,

Try adding z-index rule on site branding. Your final code would look like this:

@media only screen and (max-width: 500px) {
    .site-header {
      position: relative;
    }
    .site-branding {
      position: absolute;
      top: 35px;
      left: 10px;
      z-index: 999999;
    }
}

Regards,
Kharis
aThemes Support

1 Like

Sorry for the trouble. Try this code:

    @media only screen and (max-width: 500px) {
        .site-header {
          position: relative;
        }
        .site-branding {
          position: absolute;
          top: 35px;
          left: 10px;
          z-index: 99;
        }
        .btn-menu .icon-menu {
          position: relative;
          z-index: 99999;      
        }
    }

Regards,
Kharis

1 Like

Works great now! :slight_smile:

Thanks, Kharis.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like