Top Bar Menu disappears on Mobile

[CTMaster]

When I resize my site to mobile the Top Bar, where I have a menu that’s very important to the site navigation, disappears. How can I set that to remain visible?

Thank you.

[Rui Guerreiro – SUPPORT]

Hi,

It disappears by default in mobile, due to lack of space and design choice.

You can create a specific menu for the mobile where you can include the links that you have in the top bar on the desktop version.

Hope it helps

-Rui

[CTMaster]

Is there a resource somewhere that shows me to how to achieve having those top bar links appear for the mobile? Or is that something I have to hire a developer to do?

Thank you.

[David Martin – Support]

Hey,

Do you have a link to your site, the one provided is wrong.

This CSS should get you started:

@media only screen and (max-width: 767px) {
	#top-header {
		display: block;
	}
	.header-7 #top-header .th-left {
	  display: none;
	}
}

Thanks,
David.

[CTMaster]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please post a link to your site 🙂

Thanks.

[CTMaster]

This reply has been marked as private.

[David Martin – Support]

Hi,

Perfect!

I have amended the code snippet to this:

@media only screen and (max-width: 767px) {
	#top-header,
#top-bar .tb-left, #top-bar .tb-right {
		display: block;
	}
	.header-7 #top-header .th-left {
	  display: none;
	}
}

Can confirm this works for me.

Thanks,
David.

[CTMaster]

This reply has been marked as private.

[David Martin – Support]

Great, no problem 🙂