No Dropdown menu

Illdy
1

my website is http://staging.wordoflifetab.net/

I am trying to get a drop down menu but as you can see it is just placing the pages at the top. Also I use chrome and on IE 11 the Contact Us disappears from that section and button 1 disappears from the jumbotron and the font is different.

2

Hello,

I’m having some difficulties to locate the issues and which are screenshots from IE and where to look.

I see on your website that you managed to set up the drop-down menu and there’s 1 button on the homepage.
If you are missing any information, please input new content and re-save the field.

Please point out what issues you are still encountering and I’ll do my best to provide you the assistance.

Regards

3

I apologize for all the screenshots. I will try to clarify my problems now.I was hoping the menu up top would look like a mobile menu. Where you click the horizontal lines and the menu drops down. But as you can see in my attached picture it doesn’t show it that way for IE or Chrome.

Also the Contact Us Header is now gone for both IE 11 and Chrome.If i need to make that a separate thread I can. Unless it’s something I messed up when I was editing CSS. I am running a child theme BTW.

4

Hello,

Try this CSS to force the mobile menu on desktop, let me know if it’s working alright:

.open-responsive-menu {
    display: block !important;
    float: right;
}
.header-navigation{
   display: none;
}
@media only screen and (max-width: 9999px)
.responsive-menu ul li a {
    width: 100%;
    padding: 15px;
    display: block;
    border-bottom: 1px solid #e4e4e4;
    color: #000000;
    text-align: center;
}

As for the contact section header not displaying, please locate the field in Appearances > Customize and just input new content before you Re-save and & Publish.

Best regards

5

Attaching a image. You can see the menu came up on the right. Hard to see though.

6

I mean the left lol

7

Hello,

Since you are using the mobile menu items, the style only kicks in on smaller display.

Try this code:

.responsive-menu ul li a {
    width: 100%;
    padding: 15px;
    display: block;
    border-bottom: 1px solid #e4e4e4;
    color: #000000;
    text-align: center;
}
.responsive-menu {
    width: 100%;
    background-color: #ffffff;
    margin-top: 20px;
    display: none;
}

It’s quite hard to debug this via browser, temporary admin dashboard access would be perfect.

Regards

8

Still looks the same.

9

okay I added both codes you gave me and its working. It does have bullet points on the left of the menu. Cn those be removed? If not it’s not a big deal. It looks great. I appreciate your help.

10

Hello,

I cannot see the mobile menu display on the website so I cannot really help you with any coding here.

It should be something like:

.responsive-menu li{
list-style-type: none;
}

Like previously stated, the menu mobile style it’s only available on smaller screens so you just need to fetch that information from the CSS and/or delete/modify the media query for it.

Regards

11

I have the mobile display coming up on my desktop now thanks to your code earlier. Thanks for all the help. Like I said the small dots arent a big deal.

12

Hello,

I’m not sure about what small dots you ara talking about.
I sent you some code to hide the bullets from the list items, but maybe you are looking for something else.

Happy that everything turned out ok.

Regards