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.
Related
So, i made a website using Wordpress and elementor, I would like to change the image on the right when you hover on the label 'Carrello'. Basically when I hover on different drop-down menu labels, the ima should change accordingly on which link I'm hovering. That's the link of the website (don't look at anything else, I'm just doing some practice on Mega Menu).
That's my code (in this example I've just used display:none just to see if I can affect the other div but the goal should be change it) :
.megamenu22 .elementor-nav-menu li:nth-child(2):hover ~ .elementor-element-d0f1e73 img {display:none !important}
Thank you!
https://www.archless.it/
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.
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }
Consider the following fiddle: http://jsfiddle.net/GMA76/
On the links active state I want to replace the content of the a tag, then it should continue to follow the link. However when I style it as shown in the fiddle and here:
a div:first-child{
display:block;
}
a div:last-child{
display:none;
}
a:active div:first-child{
display:none;
}
a:active div:last-child{
display:block;
}
The link doesn't work the first time you click it. It only replaces the content and then it seems the redirection fails.
How would I fix that?
Browsers don't take well to content changing on the :active event. Even if it did work, a CSS-only solution would likely mean that the user wouldn't even see the change in content before the new page had loaded (or started to load with a white screen). I tested a lot with the :after pseudo-selector and the content property, but this didn't work either.
And rightly so. Changes to content should only be done with a language like Javascript. This is a logic issue and is outside of the scope of a styling language. Therefore, I would suggest using Javascript.
I've created a quick fiddle here using Javascript with jQuery (doesn't need jQuery it but it's easier) to switch the text in the link and then go to the new page exactly 1 second afterwards. This way you only need to have the original link in the HTML rather than hiding separate links with CSS. There are more flexible and extensible ways to do this if it's not just for one or two links but for the sake of an example, take a look at the fiddle.
This is the jQuery:
$(".switch-link").click(function(){
$(this).text("Test Two");
var href = $(this).attr('href');
setTimeout(function(){
window.location = href
}, 1000);
return false;
});
1000 is the delay between the text changing and the browser starting to load the new page, you can change this to suit your needs.
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.