Getting rid of a column and keeping a menu at the top in mobile.

• 

  andrea100sec · Member · Sep 14, 2015 at 4:23 pm

  • Copy link
  • Add topic to favorites

  Hello! I have two questions about changing the template we are using.

  I have not been able to successfully find a way to remove the right column of our template. I’ve gone and turned off al widgets that usually fill that column, but the column is still there. Is there css code I can add in that will remove this column on all pages?

  I need the menu at the very top that has our contact info and Facebook info to stay at the top of the page, even when the window shrinks/on mobile.

  Can anyone advise? I’ve had no luck so far with other postings, and am wondering if it is template specific.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 14, 2015 at 7:39 pm

  • Copy link

  Hi there, on the right column issue, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .site-main {
      border-right: none;
      width: 100%;
      padding-right: 0;
      max-width: 960px;
  }

  In addition, in the Media Width field below the CSS edit area, enter 960.

  The standard menu does not work well on small devices as the links are hard to touch accurately. At 959px in width, and below, the menu changes to the touch device menu (the circle with the three bars, affectionately known to theme developers as a “hamburger” menu. This menu is specifically meant for smaller screens and the menu elements sized for easy taps on small devices.

  I do notice that the “hamburger” is overlaying your site logo. We can use the following CSS to adjust things so that this doesn’t happen.

  .site-logo-link img {
      max-width: 400px;
      width: 100%;
  }

  Give the above a try and let me know what you think.

• 

  thesacredpath · Member · Sep 14, 2015 at 7:59 pm

  • Copy link

  Actually, let’s use this instead, which will work with any size logo you happen to use.

  .site-logo-link img {
      max-width: 100%;
      width: 100%;
  }

• 

  andrea100sec · Member · Sep 14, 2015 at 8:39 pm

  • Copy link

  Thank you so much! That absolutely solved our column problem.

  I really appreciate your help!

• 

  andrea100sec · Member · Sep 14, 2015 at 8:49 pm

  • Copy link

  If we still do want to lock that top menu (the one with our contact information and social media link) above our header, so that it always appears at the top, is there css code I can dump in that will anchor it there?

  I understand that it will be small, but we’d like at least our contact info to appear at the top on every page.

  Thanks again!

• 

  thesacredpath · Member · Sep 15, 2015 at 10:39 pm

  • Copy link

  Hi, give the following a try. Paste it after all other CSS you have now.

  @media screen and (max-width: 959px) {
  	.site-top {
  		display: block;
  	}
  	.search-toggle {
  		background: #fff;
  	}
  	.search-navigation {
  		margin-top: 90px;
  	}
  }