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.
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.
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.
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.
I am making a simple navigation bar at the top with CSS and HTML (some code I have)
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li>Settings</li>
<!--...-->
</ul>
and so on with a little CSS display:inline magic. That all works fine, except I want to move some of the links, like "Settings," to the other side of the navigation bar and replace it with a little icon. However, I cannot find how to do this. I've tried float:right and applying it to some of the list items using class and then referencing them through CSS. I've also tried text-align:right, but nothing seems to work. What am I doing wrong and how can I get some of the list items to be on the right side of the navigation bar?
Try this ->
Working Demo
I have put the settings and the register on a div and added float:right to push it to the right.
If you want a image replace the text with <img/> tag
I'm not sure what your html looked like exactly but this did the trick for me
<div>
<ul style="list-style: none; display:inline">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li style="display:inline">Contact</li>
<li style="display:inline; float:right;">Settings</li>
<li>One More to Make Sure It Works</li>
</ul>
</div
Working jsfiddle
I'd say just make another unordered list completely. It sounds like what you're trying to do shouldn't be done in the same ul.
There might be a way to do it how you're asking but it seems like making a seperate ul would be the easiest way.
I've got a un-ordered list. And I've added icons using the Twitter Bootstrap 3.
Using Carme Font from the Google Fonts. For the normal text Carme font works very well.
But in the unordered list which i created, when I add a icon to it using the BS3, I'm getting icon and the font-family for that particular list is getting changed.
FIDDLE for a better understanding.
Notice the font-family both the list items with and without glyphicons.
I don't know whether the problem is..
Any suggestions will be helpful for me to overcome it.
Icon tag needs to go outside <a> tag
<ul>
<li>
<i class="glyphicon glyphicon-user"></i> One 1
</li>
<li>
One 1
</li>
</ul>