How to fix responsive drop down menu using css? - html

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.

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

CSS Dropdown Menu Changes div Background Color

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;
}

Navbar collapse button and navbar links don't align properly

I've pasted all of the relevant html/css here: http://www.bootply.com/6YQGagMczD
My problem is that when in responsive mode, the button to open the navigation menu doesn't seem to align properly with the centered navigation menu items. It's off by what appears to be a few pixels.
You have padding-left of 5 pixels on the menu, but no margin on the menu icon itself.
What you're missing is:
.navbar-toggle {
margin-left: 5px;
}
I've created a new Fiddle showcasing this here.
EDIT
In your new fiddle, the misalignment comes from the fact that .navbar-toggle (created by Bootstrap) has a default margin-right of 15px. You'll need to override this by resetting it to 0, as such:
.navbar-toggle {
margin-right: 0;
}
Here's a new fiddle.
Hope this helps :)

Bootstrap navbar collapse doesn't show all list items (<li>) from the menu

I'm working on a website, I have implemented the inverted navbar from bootstrap taken from here :
https://getbootstrap.com/components/#navbar
I haven't modified it, but when its resized to a smaller window in computer browser, or when viewed on a mobile phone, when you clicked the "3 bars icon" for expanding the menu it's not showing all of the menu buttons ().
I have tried to change the CSS but without any luck.
What is it that I should look for to change, or why is it not showing all items from the menu?
This is the website itself: https:/dh-automotive.com
find this in your style.css file:
.nav {
width: 90%;
float: right;
max-height: 65px;
min-width: 680px
}
remove max-height and min-width lines.
Overall, your CSS is incredibly messy, how did you manage to get it to this state? What are you using to build this website?

center joomla menu without changing the responsive template

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.