Customizer: Mobile/Tablet menu issues

Can’t see this post very well.
Yes you have some issues, something wrong in your style.css (look also for some bracket ‘{‘ ‘}’ not closed)
Also using span11 an span10 with offset for navbar and brand, don’t know, why not using span12 and margin auto?

Another thing, yes there’s a way to hide submenus and then show them on hover, but do you want your “responsive” menu appear that way? It’s a little mess. If you try this:

.navbar.resp .tc-hover-menu ul.dropdown-menu {
    display: none;
}

It’s not so good with your responsive menu structure.

morning and thank you for your help….

I found the missing “}” corrected the span11 to 12

I am finding the code confusing regarding “.navbar .navbar-inner” in full desktop width. I can see with Chrome tools that it is sitting off to left although I have margin: 0 auto attached to it.

And hiding the submenus in mobile is not working well in trying that code out. I really would be happy to see it look like this: https://www.themesandco.com/code-snippets/
for the mobile version.

This is where I’m no clear … I just need it to get back to looking like the page I just mentioned. Suggestions? At this point I’m not clear on what to need to undo, etc?

thank you ,

BobH

Let’s try to proceed step by step, do you agree?
1) From this .navbar-wrapper .navbar.notresp.row-fluid remove widht:90%; and margin-left: 20px;
2) From this .navbar .nav remove width:100%; and add margin:auto;
3) make this:

.navbar .nav > li {
float: none;
display: inline-block;
}

become this:

.navbar.notresp .nav > li {
float: none;
display: inline-block;
}

Let’s start with these.. Looks like a good starting point, don’t you think?

Thank you very much….much improved. You mentioned this as being a starting point. Other suggestions?

Bob

We have to act on your responsive menu submenus, but now I’m a little tired (it’s late here). Hopefully tomorrow I could help you if you can’t find a solution.

Thank you very much for your help…and if you don’t mind, yes, I would appreciate your suggestion when you get a chance. Thank you

Bob

[Before make these changes please back-up your child theme style.css, so if something goes wrong you will not curse me :P]

Let’s do some other mods:
1) you don’t need this at all:

.navbar .nav > li > a, .navbar .nav > li > a:first-letter, .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a {
display: inline;
color: #6eabb8;
padding: 5px 20px;
}

remove it.
2) Make this:

.navbar .nav > li > a {
position: relative;
top: 15px;
left: 10px;
}

become this:

@media (min-width:979px) {
.navbar .nav > li > a {
position: relative;
top: 15px;
}
}

and move it to the bottom of your style.css (media queries should be loaded after normal rules)
3) Make this:

.navbar .nav {
float: none;
width: 100%;
text-align: center;
margin: auto;
}

become this:

.navbar.notresp .nav {
float: none;
width: 100%;
text-align: center;
margin: auto;
}

4) Make this:

.navbar .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}

become this:

.navbar.notresp .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}

What do you think about the result?

hi and thank you again. Much improved. Couple final things that I see now is that the full width nav menu ,is off to the left now and in the mobile version the sub menus are not quite working right. In below “About” there are 2 links and the hover seems to be picking up both of them. If you take a look it’s pretty obvious. Am I missing something I should have tweaked? Again, thank you very much for your time and again, much improved.

Bob H

You have lost this:

.navbar.notresp .nav {
float: none;
width: 100%;
text-align: center;
margin: auto;
}

why? ?? ahh I see you wrote navbar.notresp .nav instead of .navbar.notresp .nav . Correct it ??

You didn’t apply the point 4).
And you have some “& gt ;” (without spaces) instead of “>” in your style.css.
Correct it ??
Let’s see …

morning,

Thank you again and careless on my part with the “& gt ;” oversights. I did make the changes you mentioned but the mobile submenu hover issue remains. I must be missing something simple?

Bob H

Hehe yes, again you didn’t apply the point 4)

4) Make this:
.navbar .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}
become this:
.navbar.notresp .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}

hi…

I did what you suggested but still that submenu mobile menu hover is not correct. Should that be within the media query for that width?

thank you.

Bob H

Make this become this, doesn’t mean .. take this and add this ??
But probably is due to my poor english, sorry.
You have both.

@bobth1019
Ohhh, now I see the problem, you have this:

/* Fix 2nd level <li>s  */
.navbar .nav > li .dropdown-menu li {
float:              left;
width:              100%;
text-align:         left;
}
*/

You didn’t commented it the right way. You should have this:

/* Fix 2nd level <li>s  *//*
.navbar .nav > li .dropdown-menu li {
float:              left;
width:              100%;
text-align:         left;
}
*/

All is good and thank you very much for being patient and very helpful.