I have the anchor links working fine in the navigation (Services -> Headhunting/Executive Search etc)
But the anchor links on the icons below the nav do not work. When I put the url (including the tag) into a new browser window it works ok) so I don't understand why it can't work from the icons (or even the text below the icons but it does from the main nav). Any ideas?
http://www.mapthemarket.co.uk
I don't see any anchors in that page's source code. The links from the menu use some sort of Javascript for scrolling.
This is how you make an anchor in HTML:
Link to headhunting anchor
<h3 id="headhunting">This is my headhunting section where the above link jumps to</h3>
One of your scripts (this one), changes the behaviour of your links depending on the classes. The links at the top have the classes i.e. starting with menu-item, see below:
<div class="second"><div class="inner">
<ul>
<li id="nav-menu-item-1496" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home "><i class="menu_icon fa blank"></i><span>Headhunting/Executive Search</span><span class="plus"></span></li>
...
To get the same behaviour, I suggest you copy the classes from the links at the top and put them on the links that are not working.Looks like you will also need to have the wrapper div with the class second.
Try adding some of your code to jsfiddle, so its easier for the community to help you.
Related
I'm building a progressive web app that outputs data onto the pages via an API. For example, there could be one page called about us and in about us could have history, location, etc... for its sub nav. Here are a couple of examples as to what I mean:
When on the health & wellbeing page
When on the about us page
The issue that I am having is because the about us links are contained in a UL element that is contained in the about us LI element, it positions the sub nav to start directly underneath it and not underneath where the logo is.
Here is the structure of the HTML code that populates the navigation, based on when visiting the about us page.
<ul>
<li id="nav-1">
Home
</li>
<li id="nav-2" class="open-two">
Health & Wellbeing
</li>
<li id="nav-13" class="open-two">
About Us<span><i class="arrow down"></i></span>
<ul class="level-two" style="display: grid;">
<li>About Us Home</li>
<li id="nav-8">
History
</li>
</ul>
</li>
</ul>
Now I did try using margin-left:-346px; on the level-two UL element, which produced the following examples:
When on the health & wellbeing page
When on the about us page
Looks better on the health & wellbeing page, but then I realised after seeing the about us page that margin-left:-346px; didn't really fix the issue due to it only moving to the left a certain number of pixels.
So my question is, how do I get the dynamic sub nav to start underneath the logo and not start underneath its parent nav item so it turns out like the third image?
Update: Here is another example of what I am referring to https://jsfiddle.net/hkctdpqn/1/
I figured it out. I had to make the position of the parent UL element relative and make the position of the level-two UL element absolute. Then I adjusted the margin-left value until they all started underneath the logo and not to their parent elements.
Right now I am working on the website of a project working with handicapped people and looking for a mobile navigation with great accessibility and a no-js fallback. First i was thinking about using the :target-pseudoclass to open and close the navigation, but I cant open a sub-navigation this way since the main-nav closes if it looses the target. Then I was looking at the checkbox hack but there I get a roblem with the accessibility since Checkboxes or Radio-Buttons have another use case, a different way of control and also they are form elements, you should not use outside a form. Is there any clean and accessible way to get such a navigation working?
I hve a navigation like thw following:
<nav>
<ul>
<li>
Link
<ul class="sub-menu">
<li>
</li>
</ul>
</li>
</ul>
</nav>
The navigation can be quite big so I dont want the sub menus to be visible the whole time (if possible), so that you dont need to scroll such along time.
This is not a question to give me the exact code, I just need some hints to find a way for an easy accessible no-js mobile navigation with sub-menus (maybe with an example)
I have this weird thing happening to me.
I have a menu and I try to create a mega menu.
I`m adding a ul in anchor tag to create the mega menu but it s pushed out of it. Anyone know why?
HTML:
<ul class="header_menu">
<li>
<a href="#">
Menu 1
<ul class="sub_menu">
<li>Submenu 1</li>
</ul>
</a>
</li>
and check this picture of html using view source.
image using view source
The ul sub_menu is pushed out of the anchor and its placed near it, not as a parent of anchor tag.
Any ideas?
EDIT:
As Quentin said, and according to w3c "Nested links are illegal".
A more detailed explanation here:
https://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Your HTML is invalid.
See The a element:
Content model: Transparent, but there must be no interactive content descendant.
You cannot have a link as a descendant of another link.
If you remove the nested link, then the problem goes away:
You probably want "Menu 1" to be a link and "Submenu" to be a different link. So end your first link before the nested list.
Testing font awesome out on a site: http://simply-logs.co.uk/
I've added the icons to the navigation menu items, but it's skewed the icons & text out of line. Any idea how to line them up ?
Thanks!
The reason the two items are not lining up correctly is because you are applying the font-awesome icon class to the li tag instead of as it's own tag. Try replacing your current items with this:
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19">
<i class="icon-home"></i> Home
</li>
This will cause your icon to appear in line with the text, it will also allow it to be click as a link. The above syntax (using an i tag) is the standard way to use the library.
I just realised that hiding text is a bad attempt from a thread I just made,
As a sidenote, Google does not like
hidden text, and if you have a lot of
it, it will consider it deceptive
coding. One is probably fine, but
you'd be better off using the alt
attribute on the image tag.
But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><span>Home</span></li>
<li id="menu-header-portfolio"><span>Portfolio</span></li>
<li id="menu-header-profile"><span>Profile</span></li>
<li id="menu-header-newsletter"><span>Newsletter</span></li>
<li id="menu-header-blog"><span>Blog</span></li>
<li id="menu-header-shop"><span>Shop</span></li>
</ul>
</div>
is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?
what should I do instead if I have to use an image for a button and images for navigation link list?
thanks.
Hiding the text also means it'll be missed by some screen readers.
A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.