please see
I want the selected tab to be light green/black text when tabs change (active). And have the non-selected tabs to be dark green/white white text
help please
if i am an idiot and missed something simple, sorry!
Can you clarify what you mean? You already have that styling applied to :active anchors, that is anchors while they are being clicked upon.
Or did you want this for a different state, such as the .active actual class, not the pseudo class?
1 Like
BINGO!
it worked!
though i feel i was not clear : (
this fault is mine…
what i am after is the page being viewed light green / black text staying there while the visitor is on that page
ALL other links dark green / white text
say a visitor is on my home page
i want the home page tab to remain light green / black text… … never goes away… stays there consistent
UNTIL say a visitor clicks on Links… now i want Links tab to remain light green / black text… … never goes away… stays there consistent
all other links dark green white text
i hope i am clear!
do not want to confuse you
if its helpful, kindly see www.forallthetime.com or the above codepen
yes… i am FULLY aware it needs tweaking. that will happen!! its sloppy and looks bad i know
but for now i politely ask for the navigation to be resolved
i sincerely thank you for your time and guidance!!
There is an .active class (do not confuse with :active) on each page on the current nav link which you can use as a hook for styling.
Try this:
.main-nav a.active{
background:#33ff33;
color:#000;
}
Is that what you wanted?
YES!
THANK YOU!
crisis averted!
please look
please explain to me where i was confused? i not only want the code, but i want to understand it
breakpoints and media queries are next.
Paul, should i use max-width in my media queries… working from desktop down?
also, can i change font weights, or even use bold / italic, on google fonts? i coded just one font from various options… there were other options there…
again, i sincerely thank you!
Only you will know that
I’m guessing that you thought the pseudo class :active was something to do with the currently active page item. :activeis in fact the moment you click a clickable item like a link with your mouse and that is the point you have activated a link or button to do its job. The moment you release the mouse button the active state of that element is gone but not its action if any is required (such as travelling to a destination).
:active is a fleeting state and is only there to show that something has been actioned (if it has been styled to show differently). It is not persistent and doesn’t carry on to other pages.
To style something persistently you need to use a class to that and people seem to like using the classname of .active when in fact .current would be a better name and avoid this eternal confusion
That’s the way I do it because I’m a desktop first kind of guy Historically I coded for desktop nly because there was no mobile so that’s the way I like to work. I also find it much easier to break down a large screen display into a smaller screen than go the other way.
However it doesn’t really matter if you work from mobile first and use min-width media queries to build the desktop version instead if that’s the way you like to work.
In the end its up to you and what you find easiest or fits onto your work flow better. Just try not to mix min and max width media queries together because that makes it to complex (there are rare occasions when you will need both but generally best avoided).
When you download the google fonts you should also download the variations of that font that you are going to use (bold, light, italic). If you don’t download the variations a browser ‘may’ try to add a pseudo bold or italic to the font but it won’t be as nice as the real thing. It may be good enough but best not left to chance.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.