Need help with superfish mobile responsive menu

HTML & CSS
21

Hi Paul -

view source on my page you can then just click the link

Oh I never knew that!! I added it but hamburger is still not working. Chrome reports 2 problems which are not important are they?

Uncaught ReferenceError: False is not defined … localhost/:233
Failed to load resource: the server responded with a status of 404 (Not Found) … http://localhost/favicon.ico

Capital F

well that’s illogical – true is in lowercase. But it works now!

just have the superfish at the top of the css file

I tried that but it’s still over-ridden by the other css. I placed it directly under resets and before BODY but it’s displaying the “a link” styles under Body. So I added !important to .sf-menu a’s color & text-decoration and it works now. My goal is to reduce the number of calls to the server that’s why I want it in style.css.

You can center the menu if you remove the float

Ah goodie, that also liberates #menu from #container. Oh I just realized if I add clear:both to #container, that releases a floating #menu from it! I spent light years pouring over the html yesterday trying to see how it was trapped, instead of looking at the css!

Centering the menu centers all the children too. I tried adding “text-align:left!important;” to .sf-menu ul ul and to .sf-menu ul ul li but neither works. How can I left-align the children?

Now that I’ve unfloated #menu, is it okay that li still floats? – .sf-menu > li {float: left;}. You’ll recall Ryan said earlier on

“.sf-menu” needs display:table and to not be floated. Then, “.sf-menu li” needs display:table-cell; and you need to unfloat that.

The main menu only works at 1024 (i.e. from tablet landscape + wider) so I may as well unfloat & center it. Even at tablet portrait (768x1024) if it’s floating (& wrapping) the children under the last parent on right are cut short so you can’t read the full link.

I’ve set the @media to 900/899 now. I hope that’s not too unusual…

thanks! Val – http://dev.greensmoothie.com/

22

You aren’t linking to it correctly. The link says file not found.

http://dev.greensmoothie.com/1nav/velocity.min.js

Check your path and make sure the file is in the right place.

Actually you are correct and the capital F was nonsense sorry (even though it made it work). The problem is that you need to be using cssArrows not autoArrows

e.g.

cssArrows:  false

I must have copied that section from an old version :frowning: .

You have a strange css file with 2 resets. One at the start and then one half way through which is upsetting the revised css files.

Put the original superfish file first because you want to over-ride those later. Then add your reset (not 2 resets). Then add your main css which will contain the over-rides to the superfish I explained earlier. We leave the original superfish unchanged but just modify it later which keeps the original in pristine condition should it be upgraded later on.

No need for !important!! Just get the specificity and cascade position correct.

Just use the same specificity no need for important again.

#menu li{text-align:left}

I have given you the code and best course of action for when the hamburger menu is active so don’t mess around with those styles apart form colours and background etc.

There will be an issue on the mobile menu in that you have made the first item a link which means that when you click the item to slide down the menu the browser will instead navigate to the destination in the link instead.

You will need to ensure that the first item is not a link destination any more and just use href=“#”. You can always include the main link as the first item in the dropdown if you want but there should be no need if you have all the links in the dropdown anyway.

You can’t have an item clickable to open the menu and to also be a link. It can’t do both (not without a lot of clever js) and there really isn’t a need for the top level to be a link in this menu.

23

Hi Paul -

make sure the file is in the right place

My apologies, I forgot to upload it. It was in right place on localhost where it wasn’t working. It’s now on dev too. And hamburger still not working!

add your reset (not 2 resets)

Is this the 2nd reset? It’s from my old css on current site.

img,a img{border:none;display:block;}
a{text-decoration:none;outline:none;}
a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;}

Shall I delete it and leave just the first block of resets from blankslate? Their reset for everything is:

{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline;}

Can I also delete all the superfish css below “/*** arrows (for all except IE7) **/”? Since I’m not using the arrows.

your main css which will contain the over-rides to the superfish

Oh now I get it! Cascading… so the later style will over-ride the earlier. I deleted the !important’s in superfish and added to my main:

.sf-menu a{color:#13a;text-decoration:none}

Earlier when I changed colors in my main css it had no effect because superfish.css was over-riding it, I guess because it was called after style.css in header.

keeps the original in pristine condition should it be upgraded

oh that’s cool. Made a note to myself never to change it.

> #menu li{text-align:left}

Well I still can’t understand why .sf-menu ul ul doesn’t work to left-align it. To me, #menu li speaks to the parent too and the parent clearly isn’t left-aligning in its tab.

You can’t have an item clickable to open the menu and to also be a link

I get you. And we keep <a href="#"> on parent otherwise it won’t look clickable.

Now that I’ve unfloated #menu, is it okay that li still floats?

.sf-menu > li {float: left;}

Or do I need to change it to “display:table-cell”?

Wish I knew why hamburger works at http://www.pmob.co.uk/superfish/val-menu2.html – and not at http://dev.greensmoothie.com/

I copied it verbatim…

thank you! - Val

24

Yes it is. Its working here:

http://dev.greensmoothie.com/

You may need to clear your cache if you can’t see it.

This is to do with specificity and you need to understand the rules so that you can apply styles successfully.

Ids carry more weight than simple class selectors and one id (#menu) will always trump any number of classes. Its one of the reasons why some people advise just using classes all the time to keep specificity the same although in truth it doesn’t make much difference because you always need to know what rules affect an element and then apply the same or greater weight to them.

Yes that’s fine and has nothing to do with the rules on the parent that were added.

As I said above it is working so just clear your cache :smile:

Actually to stop the menu jumping to the top of the page just put a non existent destination in there instead.

e.g.

<a href="#nogo">

We could handle that instead with js but the above is simpler.

25

Hi Paul - you’re right! It’s working! Eureka!!! I can clear my cache a million times in FF and it ignores it. Only when I do a cold boot does it listen.

<a href="#nogo">

works beautifully, thank you!

I’m not understanding my resets. Are these sufficient:

(1) {font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline;}

and do you want me to delete the old image ones:

(2) img,a img{border:none;display:block;}
a{text-decoration:none;outline:none;}
a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;}

I’m not sure what you wanted me to delete when you said, delete the 2nd reset?

Or shall I delete both (1) and (2) and copy yours from:

http://www.pmob.co.uk/temp/mobile-nav-example-v2/index.htm

except I can’t figure out what the resets are there because it says “/* end reset styles */” but doesn’t say where they begin.

Why do I see google fonts everywhere, e.g. in your css:

http://fonts.googleapis.com/css?family=Open+Sans:400,600,700

Is it ok for me to just carry on using the old font faces like comic sans etc.? Without calling the google stuff.

thanks! - Val

26

You seem to have changed the styles a little since I last looked but you may want to look into a proper reset if you are not sure how to roll your own. Just get rid of duplicate rules as you had a couple of duplicated rules when I looked last time.

re:

img,a img{border:none;display:block;}

If you remove that rule then you will get a horrible blue border on any images that are inside anchors (in some browsers). The above rule kills the border. It also sets images to block by default because that’s what you want most of the time but its not essential.

I used the opnen sans font which is not standard but is quite a nice font for the web so I link to the google cdn for them.

Use whatever fonts you like but remember that comic sans is the most hated font on the web and most designers would not use it. However its your choice :smile:

27

I read that page. I like comic sans. I’m going to do my Parent tabs in it. Designers can go to pot.

Thanks for advice on images!

That proper reset is dated 2010! I’ll stick to [blankslate’s][1] 2014 reset.

now to go play with fonts + colors…
[1]: http://tidythemes.com/

28

I’ll have to report you as a ‘comic sans criminal now’ :slight_smile:

Didn’t see a specific reset but in their code they use mostly the styles from the one I linked to. Resets shouldn’t have changed much anywayover the years and the only addition is that the new html5 ‘block’ elements need to be added when they arrive (like the ‘main’ element) and then set to display:block (main is missing from blankslate’s reset).

You don’t actually need any resets at all as long as you remember to address the issues (margin,padding,borders, block display etc) on the elements that you do use.

29

haha, that’s an upgrade from shadier criminal acts in my past… you can’t help but be jailable when you believe no govt has the right to tell you where you can or can’t live on planet earth… I heard John Lennon saying on the radio there was a time when we traveled freely and there was no such thing as passports…

and I don’t see a display:block in your click menu that applies to any “main” – whatever main is!

Can you perhaps see how this page gets round corners just at the edges of their menu?

https://www.deliciousalternatives.com/marinated-chicken-featuring-the-unrefined-olive/

30

lol watch those Lennon references or you’ll be outed as as a 60-something :wink: imagine that

Looking for ??

31

No I didn’t have the html5 reset in place because I wasn’t using any html5 elements and this was just a demo anyway. I didn’t mean for you to copy my base styles but only the menu styles :slight_smile: (although it will do no harm).

As Mittineague said above just play with border-radius if you want round corners. It’s pretty straight forward but if you get stuck just shout :smile:

32

Hi Paul - I’m stuck on just 3 things:

(1) can’t get border-radius to be only on the outer edges (played with it for 10 million light years) as at:
https://www.deliciousalternatives.com/marinated-chicken-featuring-the-unrefined-olive/

(2) can’t get child font to be arial not comic sans. I just want parent to be comic.

http://dev.greensmoothie.com/

(3) Tablet landscape (1024x768) triggers a horizontal scroll bar, although there’s no horiz bar for my 1024 computer monitor screen. It doesn’t make sense to me because I have a margin of 2% on body and a wrapper of 97% so it’s ignoring 2 rules that should prevent horiz scrolling. I set the @media to 990/989 (based on chrome)

haha I didn’t like the look of dev.greensmoothie.com/#nogo (I want them to go) so I changed it to #top

Onward to styling hamburger… (after breakfast)

33

This should do the trick.

.sf-menu > li:first-child{border-radius:8px 0 0 8px}
.sf-menu > li:last-child{border-radius:0 8px 8px 0}

You will probably want to remove it in the media queris for smaller sizes though but I will leave that for you to work out :smile:

You can do it like this.

.sf-menu ul a{font-family:arial}

Your postitnote seems to be triggering a horizontal scrollbar on the desktop so address that first and it might fix the other issue.

It looks like you need to drop it below sooner than you are doing.

34

Hi Paul - thank you! That all works, except

  1. I’m using border-right:1px solid to separate the tabs. But it’s interfering on the far right with:

    .sf-menu > li:last-child{border-radius:0 8px 8px 0}

I tried

.sf-menu > li:last-child{border-right:none;}

but that doesn’t work…

  1. On my computer screen, it looks like the children of li:last-child are the ones triggering the horizontal scroll. Both tables are obeying the margin of 2% on body and a wrapper of 97%.

Your postitnote seems to be triggering a horizontal scrollbar

  1. How are you able to see that? In 1024 tablet check, it’s the first table with soc.media that extends further to the right, not the postit.

Do I need to reduce the 720px @media on both tables – (a) logo & social media, and (b) subscribe & postit – or only on the postit table?

I tried reducing both tables to 650px, but I still get scrollbar. Can you see what width is best? And whether both need it? Or whether it’s the children under li:last who need to be corraled?

  1. In FF when I click resize/view responsive layouts, I get the url:
    chrome://web-developer/content/generated/view-responsive-layouts.html
    Is there a way to view them all in chrome too?

thank you! - Val

35

Hi - I tried removing the children of “About” and it removes the horiz scroll bar on my computer but not in the tablet responsive view.

How do I set a maximum width to those last children?

There seems to be a problem here:

body{line-height:1;font-size:100%;margin:2%

If I set that margin to 5% only T/B change, not L/R. Why doesn’t it affect L/R?

And surely everyone should be listening to #wrapper{width:97%;? What’s allowing them to jump outside the wrapper?

36

get rid of the border and also round the anchors as you have backgrounds on those also.

e.g.

.sf-menu > li:first-child a{border-radius:8px 0 0 8px}
.sf-menu > li:last-child a{border-radius:0 8px 8px 0}
.sf-menu > li:last-child a{border-right:none}

Yes the problem is that any element that is wider than the screen will cause problems on tablets as they will need to accommodate that width to start with. What you need to do for the last items on your menu is to align them to the right and not the left so that they don’t stick out.

e.g.

.sf-menu li.end ul {
left:auto;
right:0;
}

Then add the class ‘end’ to the last two list items (shop and about). Here it is added to shop:

<li class="end" ><a href="#top" class="sf-with-ul">Shop</a>
etc...

That will align the right of the item to the right of the parent menu and thus not stick out of the screen.

37

Hi Paul -

and also round the anchors

sorry, my mistake. I see now it should be li{border-right:1px} not a{border-right:1px} - once I moved it to li, the last round corner works

<li class="end" ><a href="#top" class="sf-with-ul">Shop</a>

oh that’s so cool and clever haha!

When you’ve time, please can you reply to 3) and 4) above?

thank you! - Val

38

I’m not sure if this is what you mean but in the Chrome tools you can get the mobile display by clicking the little phone icon in the top. It’s explained here.

I’m not seeing a problem on the ipad in landscape or portrait. It seems to be working ok and the menu also seems to be working well.

39

Hi Paul - wow incredible video on chrome tools, thanks!

in Chrome ipad simulator, it’s displaying fine. In FF’s “view responsive layouts” it looks like this in tablet (1024x768):

Either FF is playing up yet again and not emptying its cache, even though I have cache set to 0 and continually clear it! OR it seems to be the top right element (.boxlogo .boxrgt) that’s triggering horizontal scroll.

And in phone (320x480) in both Chrome & FF, the container is now triggering a horizontal scroll, but hopefully this will change when I remove the floats and switch container to a table and its content/sidebar to table cells.

Shall I just take it that Chrome is correct in displaying no horizontal scroll for tablet? And firefox is wrong.

40

This is what Firefox shows me:

1024×768 45 KB

You still have that border on the right to get rid of that I mentioned before.