How to make Travelify theme to look on mobile exactly like on desktop?

Travelify
1

I have recently downloaded your theme and am editing it and it looks great, but when I look on my iPhone it shows a close-up view and the entire menu turns into a drop-down selection, with the sidebar missing.

How can I get my theme to look ‘exactly’ the same as it would on a browser (a zoomed out 100% view?)

Thank you.

2

It’s the whole point of responsive web design.

You can remove responsiveness by removing this line form header-extensions.php
Travelify responsive design

This file is located in Theme folder - library - structure.

3

Thank you for an excellent theme. As a follow up to the previous question, I would like to keep my website (www.panamarocks.com) responsive, but when I view the site on my iPhone the navigation menu obscures the website header and the left side column is messy. Do you have any suggestions on how I can ensure the header image is visible and what I can do to hide the left sidebar or make its appearance cleaner?

Thank you in advance for your help.

4

You have clearly defined to make your sidebar like that

#secondary {
	margin-left: 2.5%;
	width: 25%;
}
#primary {
	margin-left: 2.5%;
	width: 70%;
}

You have added this into Theme Options - Other - Custom CSS. So the sidebar will always be 25% of the width no matter of screen size. There is no way to maintain “clean look” while keeping the sidebar side by side in responsive website viewing on mobile.

For header part. You have pushed your main navigation using negative margin and again you have stated it “globally” so it gets messed up on mobile.

#main-nav {
	margin-top: -38px;
}

To fix this you should use different styling for mobile and desktop. You can leave the previous code untouched and add this.

/* All Mobile Portrait size smaller than 768 (devices and browsers) */
@media only screen and (max-width: 767px) {
		#main-nav {
		margin-top: 0;
	}
}
5

Thank you! I used the @media definition to address the sidebar on mobile devices as well.

6

Hi,
I installed Travelify and it’s working perfectly on desktop or an iPad.
however when I check the site on an iPhone it doesn’t look very nice so I tried to find the tag you mentioned above.
I do find header.php but there is no header-extensions.php.
I installed this theme from my own domain wordpress site.

Could you please help me how I can disable this automatic responsive?
Thank you so much!

Best wishes,
Nana

7

I also use Travelify, and am satisfied
The menu on the smartphone or tablet, I would like to see more modern.
It’s quite confusing and long search.
Can I use a different menu for mobile please?
http://www.mechelen.traveltopper.eu

8

@mechelen1 This is old topic and to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

9

Hello, i have the same question. I have installed the plugin “WP Responsive Menu” for a better Mobile Menu. My question is how i can disabled the desktop menu in the mobile menu, now i have two menu’s on a mobile device
Mechelen op zijn Best
Thanks for the help

10

@canarias Didn’t you see my previous reply to create separate support topic here https://colorlibsupport.com/c/travelify-support/ ?