Menu/header/ mobile width

On the main page is there anyway to hide the navigation and the header. I want the navigation only on the mobile site.
Also can I adjust the width of the mobile site without effecting the tablet settings? I want to make it wider. Right now it is very narrow and long.

Thank you

can anyone help me on this?

  1. You can add this to your custom CSS:

@media only screen and (min-width: 460px) {
  .site-header {
     display: none;

  1. No. If you make it wider it will just cause a scroll bar.

Thank you vlad. The first part worked. I am fine with causing a scoll bar my website has a lot of content and needs to appear as it does on the tablet and on the website.

Well, it’s a bit complicated to make the theme unresponsive. Have a look in the bootstrap.css file, search for .container and you’ll see the widths defined there based on screen resolution. Copy them and paste them in your custom CSS plugin and modify as you see fit.

Thank you. I thought it might just be easier to designate different menus for the mobile and tablet site. How would I go about doing that?

Also, What would be the best dimensions for mobile content. To fit with the default template?

  1. You can’t.
  2. Not sure I understand what you mean.

Vlad thanks for all your help.
I was under the impression that the the menus had more flexibility. I know that the mobile menu icon can be changed with a little CSS. Like from here:
I understand if I cannot name the menu the same way. I was hopping to put in something like:
@media only screen and (min-width: 460px) {
ul id: ‘menu1’
I find a way to work around it if this is still not possible.

Like I said, My mobile view is long and narrow right now. It is pushing the text of my slider off the content section of the page. I was wondering. If I were to resize my content for mobile. Is there certain dimensions pxXpx that would make it viewable on a mobile page?

Thank you again!

Please Help. I still need an answer.

Sorry for the delay. Sometimes topics are missed around here.

So, your content has nothing to do with your slider being pushed outside. That happens because your slider (or whatever that is) is not responsive while the rest of the content is. Mobile resolutions are plenty so I can’t give you one specifically.

I suggest you have a look at our documentation page and our demo site. You’ll see that Sydney allows easier ways to build the type of layout you’re trying to have on your website while also keeping it responsive. If you’re not looking for a responsive design that I’m afraid you’ll have to look for a very old theme.

The slider is master slider. It is meant to be responsive. I will take a look at the documentation, but I was trying to avoid a front end editor.

Sorry, I was referring to those two tables before the slider. Those are the ones that are causing the issue.

I want to keep those. I was just wondering how I could adjust the slider dimensions to fit the web page.

I’m not saying you shouldn’t keep them, I’m saying you should recreate them using the page builder rather than using tables.

Let’s recap:

  • the content in Sydney (or any other responsive theme) will have to be long on mobile devices because it shouldn’t stretch wider than that mobile device viewport;
  • the above is not achievable with your current setup (i.e. using tables) - it’s not achievable in Sydney and most likely it won’t be achievable in other themes;
  • I don’t know how that slider plugin you’re using works, but most likely it will sort itself out once you handle the rest.

There’s really not much I can say other than this.

great. Thank You. I will consider this resolved. I will work through any issues.

I keep putting this in and it makes my mobile and my main site menu @media only screen and (min-width: 460px) {
.site-header {
display: none;
I just want the main site menu to be hidden. Please help my presentation is tomorrow.