Slider DIV with unknown link? - html

I have created a slideshow but for some reason when I am clicking on the image to go to a next slide (as it should do) it takes it to another URL on a website I am creating.
I cant seem to find how I have managed to create a link to the page when clicking on it?
Here is the link to the page.
http://lichfieldrooms.uk/gallery.html


you <a> for all in navigation is broken you have not closed them so i think thats was causing the issue
<ul>
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
<li>
Rooms
<ul>
<li><a href="single.html">Single Bedroom</li>
<li><a href="double.html">Double Bedroom</li>
</ul>
</li>
<li><a href="gallery.html">Gallery</li>
<li><a href="calendar.html">Check Availability</li>
<li><a href="reservations.html">Terms</li
><li><a href="contact.html">Contact</li>
</ul>
it should be
<ul>
<li>Home
</li>
<li>About
</li>
<li>Rooms
<ul>
<li>Single Bedroom
</li>
<li>Double Bedroom
</li>
</ul>
</li>
<li>Gallery
</li>
<li>Check Availability
</li>
<li>Terms
</li>
<li>Contact
</li>
</ul>

Related

Responsive navigation is not showing in mobile and tablet

i am creating a site which has a 4th level navigation but it seems like not appearing in mobile and tablet. Here is my code
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>
Products
<ul>
<li><a href="#" >Food Products</a>
<ul>
<li>
<a >Baking & Cooking Aids</a>
<ul>
<li><a href="breadingmix" >Breading Mix</a></li>
</ul>
</li>
<li><a>Beverages</a>
<ul>
<li>Concentrated-Cocoa</li>
<li><a href="concentratedpowder" >Concentrated Powder</a></li>
<li><a href="energy-drink" >Energy Drink</a></li>
<li><a href="carbonated-drink" >RTD - Carbonated Drink</a></li>
<li><a href="juices" >RTD - Juices</a></li>
<li><a href="milk-based" >RTD - Milk Based</a></li>
<li>RTD - Tea</li>
<li><a href="sports-drink" >Sports Drink</a></li>
<li><a href="water" >Water</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
Whenever I click on the Beverages menu the navigation is back to Food Products.
Can you help me with this one? Thank you!

Gap above navigation bar?

Since adding a slide show into my site I now have a odd gap above my navigation bar. I am not sure on how to fix this. I tried what I did last time I had this happening but nothing ...
I have a JSfiddle set up: https://jsfiddle.net/7yj8rkbe/
HTML (for my nav bar):
<img src="img/Logo.png" id="logo">
<li>
Other
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li>
Store
<ul>
<li>Official</li>
<li>Community</li>
</ul>
</li>
<li>
Projects
<ul>
<li>Official</li>
<li>Community</li>
<li>Open Source</li>
</ul>
</li>
<li>
Forum
<ul>
<li>Programming</li>
<li>Technology</li>
<li>Gaming</li>
</ul>
</li>
<li>
<a id="nav-home" href="#">Home</a>
</li>
</ul>

#information {
top: 0;
}
You specified fixed positioning to that div but you forgot to set top value.

how to make a menu highlighted while pointing sub menu?

I am making a menu bar with sub menus. what i need while hovering mouse to menu the sub menu will appear and menu has to be highlighted. Please help me.....
<div class="side-bar">
<ul class="">
<li>Home
</li>
<li>About Us
</li>
<li>Portfolio
<ul>
<li>SELECTED PROJECTS
</li>
<li>program
<!-- i need this to be highlighted while cursoring sub menu -->
<ul>
<li>RESIDENTIAL
</li>
<li>HOSPITALITY
</li>
<li>INSTITUTION &AMP; COMMERCIAL
</li>
<li>INFRASTRUCTURE
</li>
<li>EDUCATIONAL
</li>
<li>COMMUNITY
</li>
<li>HEALTHCARE
</li>
<li>FACTORY
</li>
<li>FARM HOUSES
</li>
<li>PRIVATE RESIDENCES
</li>
<li>INTERIORS
</li>
</ul>
</li>
<li>chronological
</li>
</ul>
</li>
<li>services
</li>
<li>news
</li>
<li>Press
</li>
<li>D [+] DR
</li>
<li>Careers
</li>
<li>Contact Us
</li>
</ul>
</div>

You can simply do that using CSS, so try this:
li:hover > a {
/* Selects all <a> elements that are placed immediately after <li> which is hovered */
color: #FFF; /* or any code you want */
}
So if the mouse is over the li itself it will be highlighted, also if it's over ul or li inside the first li it will be also highlighted
Hope this will help you ..

Insert a div class inside wordpress menu

<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?

You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Simulate hover on superfish menu

I want to open one of the submenus of a superfish menu with an event. For example with a button and "onclick". And i want it to stay opened until you press a Close button
How could i do that? Can i call a "hover event" function from the superfish.js somehow?
<ul class="sf-menu">
<li class="current" id="qwqw">
ThisToHover(forexample)
<ul >
<li>
Ismertető
</li>
<li class="current">
Cégtörténet
</li>
<li>
Telephely
</li>
<li>
ISO
</li>
<li>
Referecciák
</li>
</ul>
</li>
<li>
menu
<ul>
<li>Teherfuvarozás</li>
<li>Gépszállítás</li>
<li>Gépbérlet
<ul>
<li>Subsubmenu</li>
<li>Nyan Cat</li>
</ul>
</li>
<li>Gépi Földmunka</li>
<li>Bontás</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
menu
</li>
<li>
menu
</li>
</ul>

it was so much easier than I thought.
Simply had to add class 'sfHover'
document.getElementById('qwqw').className='sfHover';
...for example.