Creative Drop Down Menu

Hi Steve,

As you have said, “On the TravelDoo site the desktop menu goes from the first image to the 2nd image when the screen is shrunk. The header element changes to white space with just a log and the menu icon.” With Responsive menu plugin, you can design a header for your website with reasonable settings. But Responsive menu plugin only allows one logo to be displayed whether it is desktop or mobile.

If you want to display different logos for desktops and mobile devices, this can be done by using an appropriate WordPress theme which allows different logos for desktops and mobile devices. Or you will have to write custom code for which you will have to contact your developer.

And when I visited https://ntlbiologica.com/, I noticed that you haven’t followed my instructions to make the menu container just like traveldoo’s menu container.
For e.g. Title was still enabled and ‘Search’ box was still at the bottom.

And I used following CSS code on your website to change the font-weight of the menu items, and it was working pretty fine.

#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .responsive-menu-pro-item-link {
    font-weight: 900;
}

Regards,
Kriti

Hi Steve,

I don’t understand this statement of yours: “I don’t want to disable the header, I want the space on the menu when it opens and this has no bearing on the format of the page when it is reduced from desktop size to 1024px or less.” Please clarify, so that I can help you with this.

Regarding Traveldoo website, I checked their website’s code on how they are able to change the logo and background colour of the header when screen changes from desktop to mobile devices. And I found out that they used ‘MK Theme’ to implement these changes. I am also attaching screenshots with my response to clarify your doubts about the header and how you can also implement this on your website. In these screeshots, the theme’s classes are clearly noticeable used to create the header of the website.

The header of the website is not made using Responsive menu plugin. And They used Responsive Menu plugin for mobile devices, tablets and on small laptops(with screen resolution of 1024px). They used Responsive menu settings only to design menu button and menu container on their website.

You can also use this theme to implement a header just like this on your website. There are also plenty of other themes which provides the functionality of different headers for mobiles and desktops.

Regarding your query about: “In WP Mobile Menu (plugin) they have settings that change the mobile display, remove the site main menu and so on. I cannot see how this is done in your product.” I studied and used WP mobile menu to give you proper clarification here. You can remove the site main menu with Responsive menu pro too. To do this task, Go To, Responsive Menu Settings -> ‘Initial Setup’ Tab -> ‘Original Menu to Hide’ (Put CSS selector of the current theme menu in this field. For e.g. my theme’s CSS selector is #nav-menu, so I put this selector to hide it). And regarding the ‘Changing the mobile display’ in your query, I don’t clearly understand what you meant here. As WP Mobile menu also uses the same design criteria about displaying menus on desktops and mobile devices. Even they don’t provide the functionality of using different designing for mobiles and desktops.

I hope I helped you with all the queries on how you can implement header like traveldoo.

Kind Regards,
Kriti

Hi Steve,

I am glad that I was able to solve your queries.

Thanks for reaching out to us!

Kind Regards,
Kriti