Can someone please look at www.eyemack.co.uk and suggest why I can’t get the CSS menu to respond to width changes, or change to the icon format at iPhone 6 Portrait width?
The menu does change to the ‘burger’ icon at the correct width, but just doesn’t bring up the pop up menu.
Because of the SmoothScroll nature of the site, I need the nav bar to remain in position at the top of the screen and have made the navbar container a layer, in an otherwise in-flow design.
No, I take it all back, it’s working fine. Great! Thank you.
Now, back to the question about getting the navbar to respond to different widths.
The responsinator doesn’t actually show what happens correctly, in fact the iPhone 6 landscape actually shows like the iPhone ‘plump’ portrait in real life.
There is no resizing of the navbar at all. Any suggestions there?
I’ve tested in Chrome, Safari and IE in Windows and OS X where possible, and it looks fine. I’ve tested on iPad 2,3 and Air, as well as iPhone 4, 4S, 5 and 6. It seems to work in all cases ok.
There is a slight issue between 375 and 560 in desktop browsers, but I don’t want to make the break higher than 375 as it looks fine in portrait on iP4 and 5 without burger. It’s unlikely people will be viewing on desktop lower than 560 I think.
The Java error is probably in the Smoothscroll action. I’ve seen that pop up occasionally in FW but it doesn’t seem to make any difference.
Safari works fine at 375 showing the burger, then at 376 it goes into the mode you saw in your grab.
My main question now though, is why can’t I get the nav bar to respond to changes in width like the rest of the site, i.e. gradually increasing or decreasing in size?
I just want to to react in the same way as all the other items do on the site, i.e. a gradually reacting to changes on width. Look at the top graphic for example.
Probably best to read my first post for a bit of background.
Then I would suggest that you would maybe adjust the text size in your Menu with some media queries as the Nav container is 100% width anyway.
This would be easier if the text in the menu had a specific class - currently it is just .style19
Not sure what you mean there Dave. Media queries?
Bearsden - do you know Glasgow? Family?
Now come on! Bearsden? That’s not Glasgow - far too posh, and in Dunbartonshire!! haha!
Seriously though, I graduated at Glasgow University and lived there for 15 years. Still my favourite city in the world - as long as the Horseshoe Bar still exists. I still go back to see mates there about 2 or 3 times a year, but my brain can’t afford to lose so many cells any more!
This is a media query that might apply to your page/menu:
<style type="text/css">
@media screen and (max-width:1920px)
{
li.fwNavItem a span {
font-size: 2.5em !important;
color: black;
}
}
@media screen and (max-width:1500px)
{
li.fwNavItem a span {
font-size: 2em !important;
color: red;
}
}
@media screen and (max-width:1024px)
{
li.fwNavItem a span {
font-size: 1.5em !important;
color: white;
}
}
@media screen and (max-width:768px)
{
li.fwNavItem a span {
font-size: 1.3em !important;
color: blue;
}
}
@media screen and (max-width:568px)
{
li.fwNavItem a span {
font-size: 1.0em !important;
color: green;
}
}
</style>
You would insert that via Page>HTML Markup in the before slot
Give it a go on one of your pages and see what you get. I added colours just so that you could see the changes easily. Edit the sizes to suit your needs (and delete the colour declarations)
I too am an ex Glasgow Uni man - too many years ago!
The Horseshoe is still there - and no it doesn’t change much.
Thanks so much again, Dave. That was helpful and I have used a slightly modified version on site. However, what I was trying to achieve on the nav bar was the same gradual resizing that the rest of the site does, not a step routine.
The difference is that everything except the nav bar is in a page wrapper and an in-line design for reasons I mentioned in the first post.
Stil, your code has solved my problem on the iPhone, so thanks a lot for your time there.
If you feel inclined to consider, there are 3 other trivial things wrong that I can’t see how to fix.
I have the responsive CSS menu set to go to the ‘burger’ at 375, yet, it shows on a iPhone 4 landscape which is 480.
the positioning of the Exhibeo gallery. No matter what I’ve tried with all Exhibeo galleries, I have never been able to achieve a proper centering of the box on the page. Pulling the screen to different widths will show what I mean. It drifts to the left as the screen gets wider, and vice versa as it shrinks.
the ‘eye’ image at the end of ‘Welcome’ loses it’s drop shadow in landscape iPad and iPhone 6 (maybe others) but is OK on these devices in portrait and desktops. Can’t see why that would be.
Any help appreciated, and, yes, I visited the Horseshoe and Tennents Bar (amongst others!) a couple of weeks ago, and it’s great to see nothing changes!
BTW - there is no need to declare a colour for the menu text in your media query - unless you are changing it from the standard set in the menu action or at different widths.