Streaming live at 10am (PST)

Menu dropdown disappears under hero slider


#1

Menu dropdown disappears under hero slider when link background is set to clear. Gone over and over this and cannot figure it out. And it won't "undo", I have to restore a backup to go back each time.

Also trying to align the links in menu so it matches on both code view and preview.

Here's the read-only:
https://preview.webflow.com/preview/excellence-in-fitness?preview=cef7a0e48a7224629d1368848d42d054






#2

Hey @gisijam sorry for the trouble with the dropdown menu component. I'm here to help! :slightly_smiling:

Be sure to give your Nav Menu and elements a width style. Also It looks like your "about dropdown" element has the background color set to white on the desktop breakpoint, if you just need this on the lower breakpoints then set it to transparent on desktop and give it a background color on the other breakpoints :smiley:

​Please let me know if this solves the problem, if not, I’m happy to help further :slightly_smiling:


#3

Thanks for your reply! Changing the lower breakpoints worked perfectly.

Could you please expand on giving the Nav Menu and elements a width style?

https://preview.webflow.com/preview/excellence-in-fitness?preview=[object Object]

Also, see attached snapshots...

How can I copy the menus (mobile and fixed) to all pages in our website, without having to adjust the main logo size?

Is there a CMS that we can setup for all pages to be able to edit the menu on one page and have it auto apply to all other pages?


Thanks for your help!


#4

Another issue:

How do I install the bottom blue bar that eases out on rollover on training link to other menu links? I cannot find it anywhere!


#5

Another issue...this one with the mobile nav menu...

  1. I would like the menu to be right justified with the menu icon.
  2. I would like the menu to stay the same size when you click on any button (the about dropdown expands width).
  3. I would like the Client Login button to be with a white background with menu

here are snapshots. Thanks for any and all help!!!



#6

Hey, @gisijam, could you, please re-create your read-only link? Old link doesn't work anymore and 2nd link is broken.

Regards,
Anna


#7

Hi @sabanna, try this: https://preview.webflow.com/preview/excellence-in-fitness?preview=186f7132188e21fd74973cd8bbe10385


#8

Hello, @gisijam.

Lets go step-by-step :slightly_smiling:

1) I would recommend moving the code snippets that you have in the embed code blocks from the "Designer" area to Custom code area in the site settings. It will clean the site structure and you will not need to add that embed widgets to every page.

2)

Here I will suggest using a Symbols. (Video Tutorial about Symbols: https://help.webflow.com/lesson/symbols)
All you will need is create Symbol from the menu, which is adjusted the best and then you can add this Symbol to any page. The best thing in using Symbols is that you are changing/fixing it on one page and all changes will be replicated to all other pages, where that Symbol is.

3)

That blue "bar" is actually the bottom border, which appears on hover, set to Class "Menu link". So all elements, which will have this class name with have this blue line on hover. For now, you can't see this line on other links, because the Hero section has higher z-index than Navbar. If you will set Navbar position: relative, it will give Navbar higher z-index and blue lines will become visible.

Yet, I noticed, that you set menu link, which has a Current state to display: none. Not sure if it was done on purpose or by mistake.

Before moving to the fixing other problems you will need to remove class "Nav menu mobile" from the NAVBAR. Because this class has been used for the element inside this navbar and any further adjustments will make even bigger mess.

Let me know when you will apply this changes and we will move to the next questions.

Regards,
Anna


#9

Hi @sabanna,

Thanks for your reply.

Regarding your #1: So, I will have to delete the html embed code blocks on every page in the site, correct? And that will be ok, since the coding is in the Custom code area?

Regarding your #3: I have been unsuccessful in getting the blue "bar" to show up on the About Us link. Not sure why. It has menulink style applied to it. Also, how would you change where the blue "bar" (bottom border) appears. I would like it to show within the white of the menu bar, not go into the slider.

Thanks in advance!


#10

Hi @sabanna,

I am trying to apply menu symbols to other pages. The first page I tried (Contact), it has a different (incorrect) appearance. What is the most efficient way to easily copy the symbols to where they work the same on each page?

Thanks!


#11

Yes, that's correct. Code from the Custom code area (in site settings) will be applied to ALL pages of your site.


#12

Style, which has that blue line on hover calls "Menu link" and you applied "menulink". It is different names.


#13

Hey, @gisijam. Your navbar is a bit "overstyled" and there is not a correct structure, which makes they styling even harder.

I can help you re-create this navbar again, step-by-step and it will fix all your other issues too.

Regards,
Anna


#14

I would be so grateful. All of your help is much appreciated. Thanks.


#15

Ok, @gisijam.

Here is the video how I changed some settings and styles for the navigation on your site. It is kinda long, but hope you can watch and follow my steps.
https://drive.google.com/file/d/0B-7cg8BSq1Z_RXlia2ZkbC1RLUU/view

Feel free to ask, if you will have more questions

Regards,
Anna


#16

Hi Anna,

The video was great. I've implemented the menu symbols on all pages. Everything was working great- previewed great on all devices. However, after I published I checked my iphone to see how it looked and the mobile menu (image) does not show up when holding vertically. When you view horizontal, it does show up. How can I get the menu seen vertical? Site is live! http://excellenceinfitness.com

Thanks!


#17

Hey @gisijam it looks like you may have some conflicting styles on the different navbar elements. Can you try adjusting those and double checking your interactions as well?

​Please let me know if this is helpful, if not, I'm happy to help further. :slightly_smiling:


#18

I'm sorry, but I'm not sure how they are conflicting if I'm using symbols? And which interactions should I check? If you could expand your answer a bit, I would truly appreciate it. Thank you.


#19

Hey, @gisijam!

Not sure what image you talking about. Everything works fine on my phone.


#20

Hi @sabanna.

Thanks for checking. Here are snapshots. Still not showing when viewed vertically on my iPhone. No menu image to navigate site:

When I switch to horizontal view, it appears:

Your help is appreciated!