When i hover over the menu tab titled “Venue Examples” the nav bar width doubles to accomodate the sub nav elements. I dont like this effect, Id there a CSS fix so that the nav bar maintains its width and doesn’t suddenly “pop fat” when hovered over?
Well a couple issues here; I see you did the float method for doing this, but that has a couple flaws. I’m not sure what your end goal here is, visually, so I switched somethings up. FYI if you wanted to keep your setup, then the ul#nav{} needs overflow:hidden; and then a background color of that yellowish to make the color extend fully.
However, I’d abandon that approach. You are already setting fixed widths and it’s better if we clean it up now. I removed your fixed widths, and switched to a table/table-cell approach. http://codepen.io/ryanreese09/pen/MwXEXM
You may want to think about building is support for small screens and mobile as mobiles don’t like hover menus and you would need to do that at the start rather than later.
I have an example here that is fluid width and will work on mobiles. It collapses to the hamburger menu for smaller screens.
It does come with quite a few extra overheads as it uses the superfish menus but it does make it a more accessible and usable menu overall.
Hi @RyanReese thanks for getting back to me. Is “One of the problem” being there is no Javascript in my code pen and basically for it to work in code pen I need to add Javascript associated with:
“js/jquery.js”
js/hoverIntent.js"
js/superfish.min.js"
js/velocity.min.js"
Yeah - the superfish relies on Javascript to do some of the work, so without you adding those Javascript files (easily copy-able from Pauls website), you’re not working with everything.
In the codepen environment I copied and pasted all the Javascript but still I’m still stuck So how can i add the JavaScript relavant to http://www.pmob.co.uk/superfish/default-menu.html in the codepen environment?
Here is the latest floundering attempt of trying to get the horizontal nav to work:
There you can see i slammed all the Javascript in the js window of code pen a bit like a kid throwing eggs in an oven and hoping a cake would be made!