Streaming live at 10am (PST)

Changing Mobile Navigation


#1

How do I change the mobile navigation bars (i.e. making the the columns thinner)?

https://preview.webflow.com/preview/ok-creditcard-smallbusiness-1242?preview=b3bbffe167ad6d683efe13676d828df5

http://ok-creditcard-smallbusiness-1242.webflow.io/

As you can see below those are fairly think blocks with not much text. I’d like the make them skinnier.

I also noticed that when published, the bars have some opacity. How do I change that color and level of opacity?


#2

Hi @chrisgreer33, Do you mean make the "rows" "shorter" or do you want the nav links to have a "slimmer" "width" when viewed on mobile. Do you have a design or image of your desired result? If so, that would help a lot!

If you want to make the nav links shorter, try adjusting the font line-height or the top/bottom padding. :smile:


#3

Slimmer. Meaning not so much space above and below the words in the links.


#4

Hi @chrisgreer33 !

I would recommend to reduce the amount of padding on the Navigation Link class on Tablet portrait view and below:

You will need to switch to tablet portrait, edit the symbol with the menu, go to the settings panel and click the Open Menu button to see the menu in the open state. Then select the navigation link classes and update the styles.

I hope this helps ! If not, let me know and I am happy to help !


#5

Thanks @cyberdave.

Is there a reason the hamburger is showing under the line choices?

And how do I change the colors for the rollover?


#6

I would highly, HIGHLY recommend going through the tutorials http://tutorials.webflow.com/. Every you have asked for is covered in them.


#7

Actually the tutorials don't address my questions @DragonDon. But thanks for trying to show me up.


#8

Actually, they do. Understanding CSS is rather important when asking for help. You said

When what was needed was a term called 'padding' (which is covered in TONS of their videos). The Intro Videos cover all aspects and are worth watching and re-watching again until things become second nature.

This video http://tutorials.webflow.com/intro-series/navbar covers exactly what you needed to see, specifically at 2:38 part regarding navbar height(also applies to any element really).

While I am far from any kind of expert in WebFlow, it is important to get yourself familiar with how it works by taking the time and going through the tutorials and courses to avoid asking questions that are fairly basic in nature. I'm more than willing to lend a hand but you also have to do a bit of homework on your side too :smile: Would be a real shame to let all of that WebFlow hard work inputting together videos only to be ignored by it's users.

So showing up? Nah, just did what we are supposed to do....study, learn the basics and then ask questions :smile:


#9

Hi @chrisgreer33 !

Sorry for the late reply, I see you have the hamburger icon over the menu choices now, and the rollover colors seems different, it seems you were able to fix that?


#10

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