Mobile Menu Bar Size

This topic has 9 replies, 2 voices, and was last updated 5 years ago by Skandha.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
September 26, 2019 at 1:30 pm #184501

RodeBoy
Participant

Hi guys, on harmonyhomeimprovements.co.uk the menu bar on mobiles – portrait view – is very deep. This is due principally to my customers name being so long, thus forcing the hamburger menu onto the next line, but I was wondering if you have recommendations to reduce the size please? Desktop and mobile landscape views are all fine.

I can obviously reduce the letters in the site title, but is that the only option?

Thanks, Chris

September 26, 2019 at 11:47 pm #184511
Skandha
Participant
@rodeboy: Hello Chris,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
@media screen and (max-width: 625px) {
	.site-title {
		font-size: 18px;
	}
}
@media screen and (max-width: 515px) {
	.site-title {
		font-size: 15px;
	}
	.site-description {
		font-size: 11px;
	}
}
```
Let me know if this works out!
Kind Regards,
Skandha
September 27, 2019 at 6:48 am #184556

RodeBoy
Participant

Perfect Skandha! Thank you

September 27, 2019 at 6:52 am #184560

Skandha
Participant

@rodeboy: Glad I was able to help you out! Have a great weekend!

Kind Regards,
Skandha

November 5, 2019 at 7:02 am #224748

RodeBoy
Participant

Sorry to open this one up again but for the same site the display on iPad in landscape mode takes it to a second line due to the customers long name. Could you please advise the CSS code to reduce the font size for these devices too please?

Many thanks,
Chris

November 6, 2019 at 3:26 am #224835

Skandha
Participant

@rodeboy: Hello Chris,
Can you attach me a screenshot of how it is showing up on the device?

Kind Regards,
Skandha

November 6, 2019 at 6:57 am #224866

RodeBoy
Participant

Hi Skandha. Sure, I have sent one through.

November 6, 2019 at 11:13 pm #224973
Skandha
Participant
@rodeboy: Hello Chris,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
@media screen and (max-width: 1024px) {
	.site-title {
		font-size: 17px;
	}
	.site-description {
		font-size: 12px;
	}
}
```
Kind Regards,
Skandha
November 7, 2019 at 5:26 am #225029

RodeBoy
Participant

Perfect Skandha. I have retained the previous CSS code to reduce the size for mobiles which I assume is correct.

Thanks,
Chris

November 7, 2019 at 5:45 am #225034

Skandha
Participant

@rodeboy: Glad it worked out. Have a good day! 🙂

Kind Regards,
Skandha
Author

Posts