- This topic is empty.
July 21, 2014 at 10:56 am #176052
Hi all! I am trying to design a website and I have created a navbar similar to one found on Apple.com and I have successfully created a rollover with an image sprite. However I would like the current page be highlighted in the navigation bar for visual context. So when somebody clicks on say, the “What We Do” page that button will be highlighted on that page. Thanks!July 21, 2014 at 11:00 am #176053TheDutchCoderParticipant
We would need a link to the site in order to see how you’ve written your HTML and CSS, or put it up on CodePen.July 21, 2014 at 11:08 am #176056Paulie_DMember
You might want to refer to this thread.
Firstly you have to have some way of telling the page that it is the current one and apply the CSS accordingly.
JS is usually the simplest way depending on the size and complexity of your site.July 21, 2014 at 11:15 am #176058
I have the code here although it might not help since all of the images are stored locally and I don’t have hosting as of yet.July 21, 2014 at 11:21 am #176059TheDutchCoderParticipant
You can always host the images with another online service and link from there. I use photobucket.com but there are plenty of others.July 21, 2014 at 11:49 am #176065
See my post for a practical example.July 21, 2014 at 12:00 pm #176069July 21, 2014 at 1:19 pm #176087
So I added JQuery to the site but what elements is the class current-page being applied to? If I already have a rollover sprite and a bunch of CSS already applied how does it differentiate between all that and current-page?July 21, 2014 at 2:18 pm #176099
Ah okay I will try that thank you!July 21, 2014 at 3:59 pm #176110
Alright so I did manage to get it to work (albeit still have to figure out a way of getting it to work with single image sprite) however I noticed it only works on /index.html and no others so I was confused with thisJuly 21, 2014 at 4:06 pm #176112
Ahhhh that makes sense XD
- The forum ‘CSS’ is closed to new topics and replies.