▼
Streaming live at 10am (PST)

Navbar links: cannot control default style

#1

Hello,
I am trying to style the navbar menu links. I am unable to control it effectively. 3 Problems:

1) Why are my 2 of my nav links still blue in the default state? I want them to be white by default, Red on hover, and a Red + underline when selected. I do not want any changes on Pressed or Focused states.

2) How do I style a link in the "selected" state- when the link shows what page it is on..? Right now, there is no way to see what page has been selected..

2) How do i remove any styling i might have added for a particular state? I am getting a bit confused between the 'Current' state and the state where there is no 'Current'...

https://preview.webflow.com/preview/shridharreddyportfolio?preview=5ebfa3a564aa77c6603fc75108753e6c

#2

Hi @srile.

Lets take care of this problems smile

1) To me only 1 of links still blue

s1.png1920x945 118 KB

You styled default and hovered states correctly. Only left unstyled current state. Here we go to other 2 problems.

2) and 3) So Current state it is what you call "selected". It appears next to link's class when on the screen view appears page or element connected to this link

s0.png801x155 24 KB

By default (if it is not styled) it takes default style settings of all links on the site. So all you need is style link in its current state as you plan (red+underline)

Hope I was able to explain correct.

Cheers,
Anna

#3

Anna,
thank you very much for the explanation! The key was in understanding that the selected page is the current page. Terminology!

I was able to successfully correct the blue link and make it red.

HOWEVER I see that the desired behavior happens only to the Case Study and Process pages. The Resume page does not seem to retain the red underline that i want in the Current state. It goes back to the default state of white... I checked the class names and they are all the same (NavLink). Can you please help with this?

https://preview.webflow.com/preview/shridharreddyportfolio?preview=5ebfa3a564aa77c6603fc75108753e6c

#4

I will check it, no problem. Just a little bit later, if you don't mind.

#5

Anna,
I think i solved it somehow. I dont know what i did smile

Now my problem seems to be that the navbar flickers everytime i go to a new page, like it is loading afresh. Perhaps you know what is going on?

Thank you very very much for your help! You really epitomize the best of the webflow community. I'll pay it forward.

Shridhar

#6

Thank you for such kind words blush
Could you repost your read-only link, pls. Previous link do not work anymore.

#7

Here it is. The question is that the navbar seems to 'load' onto the page everytime. Right now, it appears cached on my machine and seems ok.

Also, after the recent webflow update, it looks like the navbar is "behind" the rest of the page. I had to create margins for all 3 pages to push below the navbar and avoid getting behind it. ...

https://preview.webflow.com/preview/shridharreddyportfolio?preview=43738a6aff905f2af6932429cfe5dff6

#8

Hi again @srile.

Well... about "flicking navbar", it is typical issue lately and we found the reason of it. I would not recommend to use ALL option in transitions.

Check this topic, please http://forum.webflow.com/t/ran-into-this-again/18759/4

About Navbar being "behind". It has nothing to do with Webflow updates. It is CSS rules. If element has fixed position (like your navbar has), positioni of other elements on the site will ignore navbar position and size. And yes, adding top margin in this situation is usual decision.

Cheers,
Anna

#9

Sabanna
thank you for the tip about using "All" in the navbar transitions. That was indeed the problem. Thanks a lot, i corrected it.

closed #10

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