I'm trying to highlight this menu item so the user can see the page they are currently on. It can be bold or underlined, whatever really. If it can be done only using CSS that would be ideal.
here's what my inspect element looks like for the page :
Any help is much appreciated. Thanks!
It's just an example:
li.current-menu-item {
// Your style Below */
text-decoration: underline;
}
or
li.current-menu-item a {
/* Your style Below */
border-bottom: 1px solid #dd614a;
}
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
I got 2 current items on my web-site, the second is a section from home but i need to highlight only the first one, how can i do that? i added a class to the second menu item and tried to modify but it doesnt work. noob wordpress designer here. the site: https://www.crescentbun.testebossnet.ro/ any help would be apreciate.
Your class set is canceled because there is css from the theme overwriting it like:
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
color: #f4ab02!important;
}
And as you tried to set the CSS on li and there is a CSS applied on your a under the li the CSS is canceled.
So set your CSS like:
.aboutus span{
color: black;
text-decoration: none;
}
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
I'm just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.
The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it's getting on my nerves.
CSS Code:
ul.nav_style{list-style: none;}
ul.nav_style li {padding-left: 1em; text-indent: -.7em;}
ul.nav_style li:before {
content: "• ";
color: #C0C0C0; /* or whatever color you prefer */
}
ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
HTML Code:
<ul class="nav_style">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
Thanks in advance.
Chris
The explanation is simple: all the links have the same href. Assuming you will change the hrefs, this will not be an issue on your final site. :)
See my fiddle. All I did was to change the hrefs. Does it work as you expect now? http://jsfiddle.net/TheNix/sR3Ub/3/
EDIT:
Now, if you simply wish to make sure the link looks the same regardless if it's been visited or not, all you have to do is to apply the same styling to the :link and :visited states, like so:
ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
Now the link should be grey when idle (even if it's been visited), darker grey when you hover over it, and gold when you click it. See fiddle: http://jsfiddle.net/TheNix/sR3Ub/5/
EDIT v2
It seems you are a little bit confused about the states of a link, so here's the low-down:
:link is the standard idle link (can also be targeted simply as a)
:hover is the act of hovering over the element with the cursor.
:visited is applied to links which have already been visited.
:active is the state when the link is active in the user interface — e.g. when you are hovering over it, and pressing left mouse button (onmousedown), or when using the TAB to highlight the link. When you release the mouse button (onmouseup) or tab out, it will revert back to it's previous state.
:active therefore have nothing to do with determining if it is the active page, it only applies when you hold the mouse button down.
What you are trying to do, is unfortunately not possible with CSS alone. Here is a simple example of how it can be achieved with jQuery. http://jsfiddle.net/TheNix/sR3Ub/6/
This may be a reason of security of browsers, http://dbaron.org/mozilla/visited-privacy
Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ also informed about this. Most of latest browsers has taken this action to protect the users.
you must put target url in href or in data-href or etc,and after click in link and load new page you must check window location and set link color to red:
$(function(){
var url = window.location.href;
$("ul.nav_style li").each(function(i,e){
var $this = $(e);
if ($this.attr("href") == url){
$this.css("color","red");
}
};
});
Problem solved, I've decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.
PHP CODE:
if($title == "Enter"){
$enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
$enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");
echo '<ul class="nav_style">';
for($i=0; $i<sizeof($enterArrayPages); $i++){
if($proper_title == $enterArrayText[$i]){
echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
else{
echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
}
echo '</ul>';
}
So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.
Here is the CSS:
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
.linkChange {
color: #E6BD13;
text-decoration: none;
}
It's really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.
Here is an image of the code output:
Thanks for everyones comments! Much appreciated!
I am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:active but it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.
CSS: (please let me know if you'll need more of my css)
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Thanks,
/Pyracell
Add and remove a class when you select a tab link..
#navigation .active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
and use the script (jQuery version)
$(function(){
$('#navigation a').click(function(){
$('#navigation .active').removeClass('active'); // remove the class from the currently selected
$(this).addClass('active'); // add the class to the newly clicked link
});
});
From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code.
Something in the lines of:
<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
TAB_NAME
</a>
Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD
Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selected to a code that returns true for the selected tab.
P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:active to #navigation a.active)
A crude way to do this with JavaScript (jQuery)
$('a[href]').each(function() {
if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
$(this).addClass('active');
});
How are you implementing the tabs; as multiple different HTML pages? The :active pseudo-class does indeed only apply when a link is 'active', which generally means 'being clicked on'. If you're implementing the tabs as multiple HTML pages, you'll probably want to assign a CSS class like "CurrentTab" to the tab representing the page the user is currently on, and apply your border-bottom-width:0px to that class.
the practice which is usually followed is to apply a class to your currently selected tab,e.g. class="selected" and then modify your css to target that class
#navigation a.selected
This is not how it works. The :active selector matches (as you noticed) a link that is currently getting clicked (= is active/working). What you want, is a selector for the active page. You will need to use a normal css class there, like this:
#navigation a:active, #navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Things like this need to be done with an if statement using code such as PHP.
For example if you click a link you get your new page, set a page variable, something like:
$page = "Home";
Then use an if statement to add or remove extra CSS classes/ids to chnage the style e.g.
if ($page == "home")
{
Home
About
}
else if ($page == "About")
{
Home
About
}
I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.
#menu {
padding-top: .5em;
text-align: center;
font-family: 'Merriweather Sans';
font-size: 1.25em;
letter-spacing: 0;
font-weight: 300;
color: #003300;
}
#menu a {
text-decoration: none;
color: #003300;
}
#menu a:visited {
color: #003300;
}
#menu a:hover {
font-style: italic;
}
#home a.home,
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
font-weight: 800;
color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
font-style: normal;
}