My Menu Bar hiding under javascript of PasteBin - javascript

Please Help me to build my Menu Bar Correctly.
I am making a Navigation Panel (Spry MenuBar) in Adobe Dreamweaver. The provided code by dreamweaver is running well on my website, but when the submenu opens downwards then it hides under the JavaScript of PasteBin & I am not able to see the Sub Menu Items...
My MenuBar's CSS Code is on - pastbin
My MenuBar's JAVAScript Code is on - pastbin

Mostly that should be something to do with your CSS.
Set the z-index css property of your sub-menu, to a higher value.
That should do.
If that doesn't fix it, paste the menu's html, css and javascript in http://jsfiddle.net/

Related

Navigation bar stays hidden

I am create a simple navigation bar that runs along the top of the screen but when the display is under 768px it displays as a menu that can be closed with a click of a X or opened by click the Hamburger button.
I also have the site hosted on GitHub and the page can be loaded via here
First of all you should provide snippet code when answer. If you don't share its hard to identify the problem.
Secondly problem with your code is a spalling mistake. instead of menu.addEventListner use menu.addEventListener. You can find these Errors easily if see the console in your browser.

Get a burger menu accessible from all pages

I'm newbie with CSS and would go with the beautifull CSS burger menu from Victor Frere : http://codepen.io/victorfreire/pen/QywRNM
My main page content will replace the following example text :
#1 Burger Menu
inspired by
Google Material Design
How could have the 3 bars menu visible and accessible on all pages of the website ?
i mean, if user clicks on the burgermenu, click on 'About' link , that wpage loads but so far the burger menu no longer visible on the top left hand side ?
What modifications should i do to get the burger menu always accessible from any page ?
Many thanks,
Well either you could use php like this, or you could simply copy and paste the burger menu html code into all pages, maybe I understood you wrong but from what I understand this should work, let me know if you need any more help.

Conflicting components Joomla

Can't clear the problem with conflicting modules and menu. I have tried to disable jQuery and JS, use non conflict but there is a problem with mobile menu (you should minimize browser window to see mobile menu) on the website. Sometimes it appears on homepage when mobile menu goes behind the slider and is not visible. However if you go to NEWS page you will see calendar icon also conflicting with mobile menu. Do anyone have any solution?
Thank you!
You need to order the elements with z-index in the right order.
Add this code to your css file templates/shaper_helix_ii/css/template.css
.sp-mobile-menu{z-index: 9999;}
.sp-main-menu-toggler{z-index: 99999;}

Javascript href link not working outside of the menu

I'm editing a website and I can't get it to work properly. I'm using a responsive menu to go between pages (stays in the same page but changes out the page elements). The code for it is here.
Now I'm trying to include a link in the text of the page (as opposed to just in the menu)
Here is the code for that plus the menu.
The link won't work at all. What am I doing wrong?

How to show a page when mouse over on a menu?

I'm trying to understand how this kind of menu works : www.dantobinsmith.com/
How do you make the page associated with one of the menu items appear when you put your mouse over it?
Looking at the code base of the website I see that the developer has created the website primarily in JavaScript/JQuery where there is a full screen navigation that fades in the content when hovering on the correct navigation.
On clicking of the navigation item, the whole navigation is removed and the content appears at 100% opacity.
The website IS build oddly on Wordpress for backend editing, BootStrapper (getbootstrap.com) and JQuery and any additional javascript can be found here http://www.dantobinsmith.com/wp-content/themes/dts/app.min.js to inspect yourself.
you could do it with css:
#input:hover { background-coler:blue; /*additional css for #input on hover */}
or javascript:
<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

Categories