Hello I've converted the sudo image slider into a more of a content slider for my website and i want to the Nav Links (text) to be highlighted when active (on certain slides of the slider)
I've tried using: "active selector" but it only seems to work with real page links like
Home
Opposed to the slider with this:
Home
Note: the menu is not within the slider.
An example of what i mean is like the menu here but just text: http://rbista.com/demos/zwin/ (this is using easy tabs i'm using sudo slider)
Can this be done in css/html as i don't no JQuery ?
Any help would be great!
This should be enough
$(".customLink").click(function(e)
{
$(".customLink").removeClass("active");
$(this).addClass("active");
});
.customLink.active
{
some css here
}
Related
I`m looking for a solution to adding social media icons to the Elementor-Menu in WordPress. Any Ideas?
I could take a Burger Icon and add a pop up on top, but that would be my last option for me.
You can create a shortcode and use it inside the menu... you will need a code or a plugin to be allow to insert shortcodes in the menu. For example: Shortcodes in menus.
The you can create a shortcode with the elements you want to print, if I'm not wrong as follows, and put it in your functions.php file:
function function_whatever()
{ echo 'whatever'; }
add_shortcode('shortcode_whatever', 'function_whatever');
And the last thing is to insert the shortcode in the menu:
[shortcode_whatever]
for those who are interested, I solved the whole thing via the wordpress menu, in which I created a menu item for each social media (icon) with an <img src="/wp-content/uploads/....svg" class="whatever">, which I then styled.
I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.
I've tried the following:
Setting z-index to be 1000 or 10000000 in the css for .dropdown
Doing step 1 with the added qualifier of !important;
In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing
Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).
Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!
EDIT: #lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:
.transparent-header #header {
z-index: 10;
}
I have an existing site that I created with a typical 200px x 300 px logo and then a nav menu to the right of it. The last link in the menu links to a partner site.
They've decided they want to put a 200x300 logo in place of their text link, so my nav menu would essentially be bookended by matching logo images. I'm semi familiar with putting an image in for a nav link and it's a current wordpress install.
I have custom CSS in this wP install, but would that be the best practice for this? Just using an image in CSS for that specific link?
<a class="vasile" href="http://partnerwebsite.com"> Vasile.com </a>
In CSS file add this:
a.vasile {
background-image:url(http://imagethatyouwantotuse.com/image.jpg);
display:block;
height:?px;
width:?px;}
I cant post it on fiddle. because the problem cannot be recreated there.
Please take a look at my site (open it in "MOBILE" or RESIZE your browser to make it similar like mobile view):
=> my site
if you resize correctly you will see the menu icon (3line icon) on the top left side.
When you click 3line icon you will see "category" menu. then when you click arrow icon you will see "sub category" menu. My visitor will need to click twice just to see the "sub category"
How to make it just 1 click. so if visitor click 3line icon the "subcategory" dropdown is opened by default.
Thanks in advance :)
Use the Media queries and select your CSS Selector for your Element then use display: block;
for example
#media (min-width: #screen-sm-min) {
.dropdown-menu {
display: block;
}
}
https://getbootstrap.com/css/#grid-media-queries
I think you are looking for something like that: Bootstrap nav bars examples
From looking at your website, you'll notice when a 'category' gets expanded, what's happening is the class 'mm-opened' is added to the list item. And from my testing, it seems that the 'mm-opened' class has no effect when on a larger screen (because the mobile nav is its own element). So you should be able to just modify your HTML by adding the class 'mm-opened' to your category items:
So modifying your html inside the 'mobile side nav' element like this will cause a category be expanded by default:
<ul class="mm-listview mm-first mm-last">
<li class="mm-vertical mm-opened">
.....
</li>
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.