First three items of navigation anchor not functioning properly - html

My web page is at http://www.sarahjanetrading.com/js/j/index.html.
In the navigation, when I hover or want to click on the first three navigation
items, they don't function properly. The whole of the area of the first three navigation items
are not clickable. The rest of the navigation items are working properly.
Any help would be highly appreciated.

Your logo is appearing over the top of the 3 items
If you reduce the height of the logo you can select the items

The logo (< div class="logo">) is above the first 3 elements, try resizing it.
.logo {
height: 45px;
}
Firebug is quite good to find these problems

As Curt said Your logo is appearing over the top of the 3 items . So, here is the solution just give z-index to your ul#nav DIV.
Like this:
ul#nav {
margin-left: 25px;
position: relative;
top: 22px;
z-index: 1;
}

Related

CSS Toggle not floating on right side

Okay, so I am trying to make a responsive navigation menu for my website. I am currently having trouble making this dang float property work. So I've taken a combination of https://www.w3schools.com/ and a YouTube tutorial to make a website that I envision.
Here is what I got so far (Link to my code is below in hyperlink to JS Fiddle)
https://jsfiddle.net/dcannon96/e9mgsLqd/
So if you actually look in the label attribute under the media and screen section where the max-width begins for pixels.
Take a look at this part of my CSS.
label {
display: block;
cursor: pointer;
/* float: right; */
}
My goal is to make my top nav bar menu to appear beneath the hamburger icon when in mobile/tablet form. When in desktop mode, my menu list is on the left side of the screen, but when I am in mobile, the float right DOES NOT bring the rest of the items beneath the top nav bar.
This is what I'm trying to do https://youtu.be/xMTs8tAapnQ?t=611 (video skips to 10 minute and 11 seconds in)
So you can see what I am talking about once you remove the /**/ comment from the float right and see the different results.
you have to add overflow:hidden to the menu so the top nav bar menu to appear beneath the hamburger icon
see this https://jsfiddle.net/dow2qLck/1/
.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;
}
hi I uncommented the float:right property of .label and it was aligned to right.. Hope this what you're looking for. thanks
visit below link
https://jsfiddle.net/dow2qLck/1/777

How to Make Dropdown Menu li Vertically Listed

I can't find a way to make my header dropdown to be positioned the way I want it to. First off, the dropdown is horizontal, while it is supposed to stack up under each other. Second, the dropdown is not vertically aligned with the parent link, so I want it to be directly under its parent link and not a few pixels to the right of it. Using the left: __% only worked on one while totally pulling off track the other dropdown of a different parent, so it wasn't relative to the position of the parent of the dropdown.
Here is the jsfiddle: https://jsfiddle.net/u6v44hdw/
I'm having trouble and I think I'm supposed to add the code here somewhere:
li ul {
display: none;
position: absolute;
top: 15%;
padding-left: 1px;
}
Thanks!
Your missing the class="sub" in <ul> sub menu.
Edit:
Here is he full example of what you want: https://jsfiddle.net/u6v44hdw/2/
Edit2: I think you don't need that z-index.

Bootstrap vertical Navigation menu - height on all page?

I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.

Aligning navigation bar logo and links in bootstrap

I've tried numerous methods but I cannot get the logo and the li elements to align properly in the header.I also cannot seem to increase the height of the header.I've tried different methods but no success.
Basically what I want is first to increase the header's size (I have a navbar-static-top header) and make the logo and the ul elements appear properly.However I have no ideea how I can do that.I also want to keep the logo's current dimensions.It does work with the current header if I resize the logo but that's not what I am after.
Bootply
[1]: http://www.bootply.com/BTSfbDudpZ
Add following css
.navbar-brand {
height: auto;
}
.navbar-nav{
margin-top: 50px;
}

CSS submenu alignment issue

I've currently working through a tutorial on responsive webdesign, and I wanted to make my navigation different than what the tutorial had (I want my nav bar to have a coloured background, and be centered..as opposed to the tut's not having a bkgd and was left-aligned).
Without the background I had the submenu displaying properly. When working to setup the coloured bar in the background, the only way I could get it to show up was to remove the 'float:left;' that I originally had in my '.primary ul li{}' selector. Now that that is removed, when I mouse over 'Item 4' which is the item with the submenu, the submenu now displays left-aligned with the bar instead of directly below Item 4. You can see what I mean here:
http://jsfiddle.net/mark_a_b/ytB66/1/
If I add the 'float:left;' back in, you'll see that the background colour bar of my navigation disappears, and my menu items are no longer centered as I want them (not I set the bkgd colour for this version to be dark grey just so you can see the menu items) as shown here:
http://jsfiddle.net/mark_a_b/ytB66/3/
I'm sure it's likely something silly that I'm just overlooking, but I've spent too much time messing around with it and getting nowhere, so was hoping someone else might be able to help me out with this. Appreciate any help offered!
Thanks!!
Just add a positioning to your sub-menu left: 0; - DEMO
.primary ul ul{
position: absolute;
left: 0; /* this */
z-index: 999;
background-color: #ccc;
height:0px;
overflow: hidden;
min-width: 100%;
}
<ul> and <li> are block-level elements;
normally <li> are placed vertically, while here they're displayed horizontally because of the display: inline; property value.
Every <li> here is also a container for another <ul> and it's not good to use an inline-level element as container for a block-level element.
The solution is: use display: inline-block;, which combine inline-level display style with block-level behaviour:
.primary ul li{
display: inline-block;
position: relative;
}