Dynamically resizing Menu(Topbar)

Big White Duck
1

I need my Topbar menu to resize (fontsize) dependant on browser width.
I currently have 3 TB’s with different font sizes in Visibility stacks and whilst they ‘disappear’ at the right point they all remain visible above their parent visiblilty setting.
If you resize this you’ll see what I mean: https://www.scale-ni.russam.me/portfolio/

What am I missing?

2

Multiple TopBar’s on the page don’t work properly.

Just write a bit of CSS in media queries to change the text sizes

@media screen and (min-width: 640px){
.top-bar-section ul li>a{
font-size: whatever!important;
}
}

Repeat this for as many sizes as you want and just leave the deafult settings in the stack for mobile ( < 640px)

4 Likes
3

That did it!! Thanks. The as used CSS:

@media screen and (min-width: 700px){
.top-bar-section ul li>a{
font-size: 0.8rem!important;
}
}
@media screen and (min-width: 900px){
.top-bar-section ul li>a{
font-size: 1rem!important;
}
}
@media screen and (min-width: 1100px){
.top-bar-section ul li>a{
font-size: 1.4rem!important;
}
}
@media screen and (min-width: 1400px){
.top-bar-section ul li>a{
font-size: 1.8rem!important;
}
}
2 Likes
4

BooYa! the landscape menu works on my iPhone when its in landscape … thats what I was after all along.

2 Likes
5

Thats a cool page Paul! Are you using a new upcoming Stack there?

6

There’s a couple of specials but they don’t play any critical role and may not survive to site maturity, everything else is released stacks that I’ve horribly abused ;)

1 Like