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
Related
I created a little site tonight about watches. You can visit it at horology dot info.
(Please do not post the actual URL of my site in your response.)
I was wondering why the dropdown menu -- which I got from https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ -- appears in id="content" rather than id="banner" (with the blue background). I want the menu to appear underneath the logo text with the blue background. Additionally, does anyone know why there is a lot of vertical space before the banner? I also want less empty vertical space at the top. By the way, I am using Firefox on Ubuntu Linux.
Add display property (display: inline-block;) to your #banner class in "/horology.css"
#banner {
width: 800px;
background-color: #00C;
display: inline-block;
}
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.
this is my site. the theme is customizeit which is responsive.when viewed in mobile screen.the top menu comes as a dropdown with white blocks.cannot see the text items.please help me in this without losing the responsivenes.Thanks!!
On each <li> in the responsive dropdown menu, there is a text-align:left property on the CSS selector .tc-hover-menu.nav li which is in the CSS file blue.css.
Remove the text-align: left; from your CSS and the text will appear. Or you can change it to text-align: center; and you'll see the same results.
I can not get the menu div centered inside the header without changing the responsive menu structure.
I use a template from JA and the client wants to have the logo centered above the menu
I was able to get the logo centered within the main div but the menu is sticking to the left and i think i tried almost every possible solution.
here is the link to the site
http://dev.turnim.com/clients/antonio_j3/
Here is one option..
.nav-collapse.collapse {
text-align: center;
}
.t3-megamenu {
display: inline-block;
}
Tested in the browser.. it works.
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;
}