sticky menu size and mobile responsiveness

Illdy
#1

Hello,

I have a website i built with Illdy theme: menade.de
I’ like to change the height of the sticky menu (on my site the pink area), but I couldn’t find any css code in the previuos posts which could’ve worked for me.

The other thing, to which I also couldn’t find a working css code here, is that some of my page titles (not all of them) are not responsive on mobile. I’d also like to change that.

Could you help me with these two problems?

Thank you!

#2

Hi there,
Thanks for reaching out.
In relation to your questions here:

  1. Please add the following CSS code within the Appearance>Customize>Additional CSS section:

#header .is-sticky .top-header {
padding-top: 0px;
padding-bottom: 10px;
height: 70px;
}

  1. Kindly provide us with a sample link to the page.

I look forward to your reply.
Best Regards.
Support.

#3

hello,

thank you very much for the css code, it did the job with the size of the sticky header. one tiny thing though: so now i have the size i wanted to, but by using this code the page ‘jumps’ a bit, when i start to scroll down and the sticky menu is activated. because of this the movement has a bit buggy feeling… any suggestion on that maybe?

for the page here’s the link: Orpheus.Eurydike.Amor – menade.de

thank you

#4

Hello

Well, this is side effect of the code you added, because once we resize height and padding, :frowning:

#5

Okay, thank you. then i’ll think about using this code though.

but could you help me with the other question regarding the mobile responsiveness? I also provided the page link in question in my previous reply.

thanks

#6

Hi

TO be honest font size of the section is good for me but if you want to change that, here is the css code:

@media screen and (max-width: 500px){
body #header .bottom-header h1 {
line-height: 27px;
font-size: 25px;
}
}

@media screen and (max-width: 768px){
body #header .bottom-header h1 {
line-height: 32px;
font-size: 30px;
}
}

Please note, you have to adapt this css