Does anyone know what css and html code I can use that will set the focus on the nav bar. In other words I want the page tab such as home page to be highlighted when the user is on the home page. If the user go's to the contact page then the contact page nav bar tab should be highlighted.
You can do this in HTML/CCS providing your pages have classes or ID's. Using the home example:
HTML
<body class="home">...
<li class="home>...</li><li class="other>...</li>
CSS
.home li.home { ... }
.other li.other { ... }
This won't set the :focus but it will give you the visual effect you desire.
You can use some sort of class for your links. An example is to have an active class which has some outline effect on it or has a different background-color. But you cannot achieve that by just using HTML/CSS, you will need some javascript to add and remove this class, based on where you are on your page.
Hope this helps!
Related
I have three html pages that can be visited through tags that are on the navbar
So, there is not a main layout that shares the same navbar. Each page has its own HTML5 but they share the same CSS file
When a certain page is getting visited, its page on the navbar has a class "active " (See below)
navbar at the index.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
navbar at the team.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
and so on for the history page
Each tag has been given CSS rules to be displayed like a button. (no bootstrap used)
What I tried to do is whenever I am on a certain page I want the tag to have a white background color. In order for the visitor to know which page is currently open.
Finally I have configured it with the following CSS rule
Solution
.active{
background-color: #FFFFFF;
}
Initially i tried to do it by using pseudo-class
1)
nav a:active{
background-color: #FFFFFF;
}
2)
nav a:active:before{
background-color: #FFFFFF;
}
3)
nav a:active:after{
background-color: #FFFFFF;
}
Also used :target pseudo class but did not work.
For those that marked 1, 2, 3 and did not work, i tried it as I read the documentation and having seen a proposed solution on fiddle.
Can someone tell me what is the difference between the solution that worked and the others that I tried allong with :target and did not work?
As long as you have three pages that each one has its own HTML code, the way you solved it is one that you could do it, elsewhere in order to use :target you had to move as follow
Specify on each <a> an id and that id to be lace also at the end of the href.
See bellow
<div class="side_col">
<a href="#sl1">
<div id="sl1" class="side_link">Accounts
</div>
</a>
<a href="#sl2">
<div id="sl2" class="side_link">Newsletter
</div>
</a>
<a href="#sl3">
<div id="sl3" class="side_link">Operator
</div>
</a>
<a href="#l4">
<a href="#sl4">
<div id="sl4" class="side_link">Invoice
</div>
</a>
</a>
And the CSS
#sl1:target:before, #sl2:target:before, #sl3:target:before, #sl4:target:before { background-color: #24BDE9; }
The :active pseudo-class is only applied to an element while it is considered to be active: for an anchor, that is typically for the time from when you click your mouse button on it until you release your mouse button. That is not a particularly long time!
Taking a look at your example, it would work like this:
User begins clicking the Home link. Their mouse button depresses, and that link becomes :active. Your CSS using the :active pseudo-class in a rule applies to it.
The user releases the mouse button. That link is no longer :active and your CSS using the pseudo-class stops applying.
Page navigation happens. That link that was :active certainly isn't any more! This is when your class would take over and you achieve that effect that you want.
:active has a very short duration tied literally to the element being interacted with by the user: they are making it :active by clicking on it and not releasing their mouse button. In your case, that interaction is brief and will not carry over during page navigation.
This is why using a class works: that class is there when the page loads, will always stay there (unless you change it programmatically), and gives you a way to apply your CSS like you want.
EDIT to answer a question on :target below.
:target matches an element by ID to the URL fragment. In your example, you aren't using IDs, nor are you using URL fragments, so there is nothing that would be considered a :target.
:target could work with a structure like this below, but it's going a long way to solve a problem best solved by classNames:
<nav>
Home
Teams
<a href="history.html#history" id="history>History</a>
</nav>
In the example above, each link has a fragment and an element with the ID matching the fragment (#home and the first nav item's ID, for example). In that case, you would have an element that would be considered a :target.
You used nav a:active{..., but active is the class, so your selector has to be nav a.active{... instead. (dot, not colon)
nav a.active { ... }
The only difference is saying a.active instead of a:active due to the fact that .active is a class. You can check out this w3schools link: (scroll down a bit to where it says "Active/Current Navigation Link")
Hopefully this helped!
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
I have a CSS conflict problem when incorporating Slick Carousel in my personal webpage. Below is a link to the page where you can see that there are no visible navigation arrows.
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-004-BN/index.php
Can this be due to CSS in my page colliding with Slick's CSS?
Here how it looks before incorporating the carousel on my page:
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-003-BN/index.php
Remove height form the .esempio class and add color in .slick-prev::before, .slick-next::before and it's work perfectly
.slick-prev::before, .slick-next::before {
color:red;
}
Arrows are white. Change:
.slick-prev:before, .slick-next:before
{
color:black;
}
you need to remove the color style from slick.css under (slick-prev:before, .slick-next:before) css styles
That is setting the arrows to white which is why they can not bee seen on the page.
Or set these as new styles in your style sheet with the !important tag that way these should be the ones which are used.
I'm trying to change the colour or remove the word Entry(header) in the top left of my bigcartel http://pafclub.bigcartel.com/entry so the page is completely white. i want it to effect just this page without changing colours for other things on the other pages which is what happens when you use the default header colour changer.
The <body> tag gets a unique ID attribute for every page, so to target the page title (and hide it) only on your Entry page you can add a bit of CSS. Head to Customize Design > Advanced > CSS and add this code in at the very bottom:
#entry h1 { display: none }
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.