NavBar Dropdown injected into SquareSpace Header Disappearing on Hover - html

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;
}

Related

Elementor dropdown menu highlights menu item and shows border or outline

This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference

how to make the menu bar that changes color as it goes down in html

In this website "https://www.armoli.com" as you can see, the menu is transparent at first and integrated with the image on the back, but its color changes as you scroll down.how can I do this in html?(with css and js)
I think You will have to use Intersection Observer API.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Much better than listening to scroll event.
(it is an API that helps you listen to an element in the DOM (can be an array). and it triggers when that element appears on the screen. then you manipulate the DOM depending on what appears there.
Check this tutorial: https://www.youtube.com/watch?v=T8EYosX4NOo
You can probabbly do this using css and javascript, simply make two css classes with your different themes e.g.
.navbar_active {
color: red;
}
.navbar_other {
color: blue;
}
Then just use some javascript to add/remove the css classes, depending on the current scroll.
Edit: something like this sounds like what your looking for: Transitioning Affixed Navigation bar - CSS theres, even a fiddle you can try: http://jsfiddle.net/jv0qvvp2/1
basically the same approach as what i said, add/remove css classes depending on the current scroll position

Prevent Anchor From Jumping to Internal Link

I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831

Background text on form select

I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.

CSS menu item does not capture all mouse movements

I am not sure how to best describe the problem I am having here. I got a CSS driven menu online and adapted it to my needs. It works perfectly in all browsers but in IE it appears that the when you move over from the main navigation to the dropdowns list a items, it does not always capture the movement and then "closes" the dropdown.
I suspect that when you move to over to the dropdown that the list a item does is not a block element thus it closes the dropdown, this only happens if you're not moving to the dropdown and not completely over the text of the list a item.
Here is the link: http://www.tepgtests.co.za/decorex/2012/new_site/ - if you move over from "Shows" to "Durban" and not entirely move your mouse cursor over the word but rather over to the dropdown you will see what it does.
Thank you in advance :)
There's a 1px of white space,
hovering that space closes the submenu because your not hovering the menu anymore...
try removing it by moving the submenu just below the menu:
.navigation_bar .first_level_menu_block {
left: 0;
top: 50px;
}
tested in IE9 , it works
It sounds like your CSS is using the inline-block directive, which is not well supported in IE.
I think this answer may solve your problem, rather than repeat it: Inline block doesn't work in internet explorer 7, 6