X Hide Nav on Mobile

Support
#1

on X, what CSS could I use to hide the Top Bar, Nav Bar, and Logo bars when the site goes to mobile?

Thanks in advance!

#2

Hi there,

Please try this CSS:

@media (max-width: 767px) {
    header.masthead {
        display: none;
    }
}

Hope this helps.

#3

Worked perfectly. Thank you.

CSS to center all the content in the widget areas?

#4

Hi there,

Please try this:

.x-colophon.top .widget {
    text-align: center;
}
#5

Thank you. That worked perfectly.

Last question :slight_smile:

http://johndwyerconstruction.com/

How can I get the site when displaying on tablet to look more like my layout I’ve attached as opposed to what it is now.

Thanks!

#6

Hi there,

Please provide us with the admin details of your site as we are not able to access it because there is an under construction page active.

Thank you.

#7

I added a secure note.

#8

Hi there,

Please add an ID to the row that contains the red boxes then add this CSS :

@media (min-width: 481px) and (max-width: 767px) {
    #the-row .x-column {
        width: 48%;
        float: left;
        margin-right: 4%;
    }

    #the-row .x-column:nth-child(2n) {
        margin-right: 0;
    }
}

This is assuming that the ID you added to the row is the-row.

Hope this helps.

#9

That worked perfectly on the red boxes, but the video and the text to the right are still in 2 columns. Can we get them like my layout, and have them stack at this width?

#10

Hi there,

You added the ID to the section. Try adding it to the row that contains the red boxes then assign another ID to the row that contains the the two column layout that contains the video then do the same as the previous code provided which is to target the columns and set their width to 50%.

#11

I think I did it right, but still the same results.

#12

Hi there,

Please remove the ID from the first section, ID should exist only once in a page. Plus, it’s only intended for the second row which needs to maintain the columns.

Thanks!

#13

ok. How can I get the layout of the video and the text to the right to stack like this on tablet size?

#14

Hello There,

The iPad has a resolution of 768 x 1024 pixels. To collapse the columns of the video in this screen size, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 1024px){
  .e23-31.x-section .x-column.x-1-2 {
    width: 100%;
  }    
}

Hope this helps. Please let us know how it goes.

#15

I cant’ seem to get it to work. Here is my CSS. And here is a screen cap on a tester tablet.

@media (min-width: 481px) and (max-width: 767px) {
    #the-row .x-column {
        width: 50%;
        float: left;
        margin-right: 4%;
    }

    #the-row .x-column:nth-child(2n) {
        margin-right: 0;
    }
}

.breakColumn {
  @media(max-width: 1024px){
  .e23-31.x-section .x-column.x-1-2 {
    width: 100%;
  }    
}

}

What am I doing wrong? I need it to look like my mockup on tablet.

#16

Hi there,

This is wrong, you shouldn’t wrap it on another CSS.

.breakColumn {
  @media(max-width: 1024px){
  .e23-31.x-section .x-column.x-1-2 {
    width: 100%;
  }    
}

}

Should be like this,

  @media(max-width: 1024px){
  .e23-31.x-section .x-column.x-1-2 {
    width: 100%;
  }    
}

Thanks!

#17

Ok. I changed that. Now on desktop, my elements don’t expand to fill the area. I’m on google chrome.

See attached. What am I doing wrong?

#18

Hello There,

It should not be 50%. Please have this block updated and use only 48%.

#the-row .x-column {
        width: 48%;
        float: left;
        margin-right: 4%;
    }

Hope this helps. Kindly let us know.

#19

that fixed the red boxes! Thanks.

How do I get the video to stack on top of the text box at this width?

#20

Hi,

You can add this in Theme Options > CSS

@media (max-width: 1024px) {
body .my-video .x-column.x-1-2 {
    width:100%;
    margin-right:0;
   float:none;
   clear:both;
}
}

Hope that helps