Removing the container outline in MH Magazine Theme

• 

  littlegreyboxmatt · Member · Apr 22, 2016 at 5:05 am

  • Copy link
  • Add topic to favorites

  Hello

  I was wondering if it’s possible to:

  1. remove the container outline for the page?
  2. centre the header logo on the page?
  3. centre align the navigation and remove the black background?

  via the Custom CSS on my site:

  http://www.littlegreybox.net

  Thanks!

• 

  thesacredpath · Member · Apr 22, 2016 at 5:19 pm

  • Copy link

  Hi there,

  1. remove the container outline for the page?

  To remove the box shadow on the container in MH Magazine, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .container {
      box-shadow: none;
  }

  2. centre the header logo on the page?

  This will center your logo.

  .logo-wrap {
      text-align: center;
  }

  3. centre align the navigation and remove the black background?

  And this will center your menu items, remove the black background and turn the menu text black.

  .main-nav {
      background: #fff;
      text-align: center;
  }
  .main-nav ul {
      display: inline-block;
  }
  .main-nav li a {
      color: #000 !important;
  }
  .main-nav ul ul li a {
      background: #fff !important;
  }
  .main-nav ul li:hover > ul li:hover > a {
      background: #ddd !important;
  }

• 

  littlegreyboxmatt · Member · Apr 22, 2016 at 10:24 pm

  • Copy link

  Thank you soooo much! that is amazing.

  A couple more requests if it’s not too much trouble?

  1. How can I remove the thin grey rules that are between the stories and potentially decrease the padding between stories?

  2. Is it possible to remove the black background in the footer and reverse the text out?

  3. Is it possible to left align the text within the main navigation drop down menus?

  Thanks again for your time.

• 

  thesacredpath · Member · Apr 22, 2016 at 10:36 pm

  • Copy link

  For #1, give this a try.

  .sb-widget .cp-wrap {
      border: none;
      padding-bottom: 0;
  }

  For #2.

  footer {
      color: #2a2a2a;
      background: #fff;
  }
  .footer-widget-title {
      color: #2a2a2a;
  }

  For #3, give the centering of the menu, add the following after all the menu related code.

  .main-nav .sub-menu a {
      text-align: left;
  }

• 

  littlegreyboxmatt · Member · Apr 23, 2016 at 1:00 am

  • Copy link

  Amazing! Thanks so much.

  Re: #2 Almost there but I was hoping to remove those widgets alltogether and just leave the Copyright and Theme info but remove the black background and reverse out the text for that section?

  Thank you :>

• 

  thesacredpath · Member · Apr 23, 2016 at 1:26 am

  • Copy link

  You can remove the footer widgets by going to Customize > Widgets and remove the ones in the footer 1-4 widget areas. That should collapse that widget area.

  Add this to reverse things in the copyright footer area.

  .copyright-wrap {
      background: #fff;
  }
  .copyright {
      color: #000;
  }

• 

  littlegreyboxmatt · Member · Apr 26, 2016 at 12:06 am

  • Copy link

  Amazing. Thanks so much!

• 

  thesacredpath · Member · Apr 26, 2016 at 1:47 am

  • Copy link

  You are welcome.