Changing navbar from vertical to horizontal and re-sizing elements to fit the changes

Hi there,
I am new to HTML/CSS so I apologize if this question sounds too basic - I’d appreciate your help in making changes to this design :smile:

This question is with regards to the below design (preview link below):
https://preview.webflow.com/preview/emu-website?preview=89bcebd0617228971af8c4541401158b

External Link:
http://emu-website.webflow.com/

When I initially started designing the website I was happy with the vertical navigation. However, I would like for it to have a horizontal navigation instead. I was wondering if you could help me with the following:

  1. How do I change the vertical navbar to a horizontal nav bar? What value should I give for the size?

  2. Currently all the section/div elements are re-sized to accommodate the vertical template. For example, even if I delete the vertical banner and add a new section, the size of the section doesn’t cover the whole page. How do I change the size of the elements for it fit the entire page if I choose a horizontal navbar? Also, what value should I give it so the element stays responsive?

As always, thanks is advance for your help.

Best,
Venita

Hi @venitasub, thanks a lot for your post. I created a short video to help get you started in changing this.

http://quick.as/gqb4i9qdw

After watching the video, you might find it easier to just recreate the menu as a horizontal menu, but I leave that up to you :slight_smile: You will also want to set the interaction that was on each navlink, to none, as there is a hover trigger on each menu link, that moves those links to the right.

You can also change the interaction to have some different animation, but it you want, you can just set the interaction to None for those links :slight_smile:

I hope this helps, if not, let me know and I am happy to take a further look :slight_smile: Cheers, Dave

1 Like

You guys are the best! Thanks so much for this. I’m going to give this a shot and will let you know if I have any questions at all. Thanks again :blush:

1 Like