Logo @Mobile is cut off

Shapely
1

Hello,
first of all I would like to say, that I’m so impressed of these Theme.
Thank you!

My question is about the design of the theme on mobile devices.
I set a logo with a min-width/min-height and everything works fine for me on desktop versions.
The logo overlaps the header navigation bar, which looks really cool,
but at the moment where the window is so small that the loupe switches to the 3 menu lines,
the logo is the same size (should so) but is cut off.
I attached an image (before and after resize), which should better explain my problem,
I hope someone could help me or give me hint!

best regards, thank you

2

Hi @nanyyyy,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Kind Regards,
Movin

3

Hello,
it is https://imsalzatal.at/.
Maybe it is a very strange question, sorry I am really new to using wordpress themes.
thank you, best regards
nany

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other



@media (max-width: 991px){
.container.nav-bar{
    overflow: visible;
}
#page .nav-bar .row > .module.left{
      width: 40%;
}
#page .nav-bar .row > .module.left > a {
    height: auto;
    float: left;
    width: 100%;
}
img.logo {
    max-width: 40%;
}
}
5

Hello,
thank you for your fast reply.
The problem, that the logo is cut off, is gone :slight_smile: but the header is very big at the mobile version, maybe I can remove the site search? Is it possible, otherwise is it possible to change the language of the site search?
Thank you very much, kind regards

6
maybe I can remove the site search?

You can remove it on mobile screens using the below CSS code.

@media (max-width: 991px){
.module.widget-handle.search-widget-handle.left{
  display: none;
}
}