Horizontal Nav bar goes "Fat" on hover

Hi from Very hi pollen count York UK :smile:

The below screen grab shows my problem but here goes:

And the code:

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?

Thanks in advance,
David

1 Like

Hi! You gave us a screenshot but no code :slight_smile: .

Is the subnav position:absolute? Doesn’t look/sound like it is.

Opps, amended in above post :slight_smile:

You need to be hiding/showing via position:absolute, not by display:none/block :slight_smile: .

Hi Ryan, do you mean change line 115 in the CSS?

Whats on 115? You need to code it.

If i need to code then I’m scuppered, i havent got the brains for it, but with a bit of guidance / hand holding maybe i could code it!

Look how they show/hide the dropdown here.
http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Yes this is what I’m after, thank you. I’m on holiday for a week now so will take a look at this with a fresh mind!

Hi @RyanReese

In preparation for improving my horizontal nav from this:

To this:
http://codepen.io/Pingbat/pen/eNKEXQ

To stop the “going fat” effect that happens when you hover “Venue Examples” can i ask… "How can I make the nav on page http://www.pmob.co.uk/temp/dropdown_horizontal2.htm stretch to fill viewport sizes?

My end game is to get this type of nav into my wedding site, so it has to be liquid if that makes sense.

Any insights welcome :slight_smile:

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

Big thank you Ryan for cracking this for me :slight_smile: I’m going to transplant it into my main page in the next couple of days and will update, thanks again!

Hi,

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.

1 Like

Ah you have tempted me now! Me thinks I am going have a crack at this, much coffee shall be drunk me thinks. Will update with progress when made :wink:

@PaulOB I know ive done something dumb to add the new nav http://www.pmob.co.uk/superfish/default-menu.html
heres the disaster in progress:
http://codepen.io/Pingbat/pen/LVrjMP

Now If i could just have a hint at what to do I will apply, just cant get the css to talk the HTML :frowning:

Thanks in advance,
David

Please finish adding over the code from Pauls superfish. I don’t think you’ve added ANY of Pauls Javascript :slight_smile: .

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"

Thanks,
David

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.

Ok Great, i’m on it!

Ok some hand holding is needed for me right now if any one has got the patience. This is what i understand so far:

  1. My navigation does not work as relevant JavaScript is missing
  2. I need to add the JavaScript from this:

“js/jquery.js
js/hoverIntent.js”
js/superfish.min.js
js/velocity.min.js

But…

In the codepen environment I copied and pasted all the Javascript but still I’m still stuck :frowning: 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!

Thanks in advance :slight_smile: