Streaming live at 10am (PST)

NavBar non-dropdown Link Formatting


#1

I'm having an issue with dropdown menus vs non-drop down navbar links.
The template I started with had all dropdown links, and I'm trying to do a couple of links that are straight links and not a dropdown. The formatting is not behaving the way I would expect it to when I use the same class names for the link. I added a div, hoping I could manipulate it, but I'm still coming up with the same issue. (If you can solve this for me, I'll also need help with making it look correct in the mobile menu.)


Here is my public share link: https://preview.webflow.com/preview/janeschwartz-rd?preview=b33eb3c2b79c434e7e75f4d3249a1948


#2

Hello @pilznr

This post is exactly what you need:

I followed @cyberdave's solution and it worked great!

Then just play with padding to adjust as you wish. :slight_smile:


#3

Perfect! Thank you!
Any suggestions for my mobile menu issue now?


#4

Also just noticed that changing it to float left in the dropdowns made the actual dropdown box go to the top, overlapping the top... Suggestions?


#5

For the mobile menu to work, you have to remove that "not-dropdown" <div>, I mean, leave the Nav Links without it.

The "not-dropdown" class is set as inline-block, that is the issue.
Fixed (adjust the links with padding):

Your dropdown isn't right because you have applied float:left to the Nav Link class.
Instead, you must create a class for the Dropdown element itself (note the element icon):


#6

I found some conflicting issues between mobile and desktop...
Give me a moment to fix everything and record the steps. :+1:


#7

Okay, no need to record! lol

It's pretty easy:
- Follow my steps above...
- After you assign a new class to the Dropdown element and set it to float:left, give it a width of 100% (percent), then do the same to the width of Nav Link class.


#8

Ok, I think that's most of it fixed. I played with some padding, and mobile looks ok now. However, they are out of order on the desktop version. (but in the correct order on mobile) Contact dropdown should be last. What did I miss?


#9

Sorry, my miss..
Also set Nav Link class to float:left.


#10

Thanks! I still have a little weird spacing for the non-dropdowns. Making changes to it screws up the little arrow icons. I'm not worried about it right now though, but I'll take suggestions. I'll get this finalized and possibly revisit later. Thanks again for your help.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.