The Sidebar, Miscellaneous Tips & Fixes

We now have a FULLY FUNCTIONING WEBSITE! That’s amazing. I hope you’ve enjoyed this part of the process. It can be tedious at times, but the results come quickly, offering instant gratification if you like that! Now, we’re going to tie up a few extra details such as the Sidebar, some useful tips, and fixes to ultimately improve your site.

Sidebar

Setting Up the Sidebar

1. Go to Widgets in your WordPress Dashboard (Under Appearance).
2. Delete all of the widgets and add 1 Sidebar Stack.
3. Go to one of the Blog posts and add a Brick to that Stack.

Brick 1: Mailchimp

• Name: Mailchimp
• 1st Content Type: Text
• 2nd Content Type: MailChimp
• Centered
• Brick Size: 0 Above and 50 Below
• 1st Content-Type’s Controls:
  • Font: 24 / Lato / Ultra Bold
  • Text:

    <p style="border-bottom: 2px solid #cccccc;">
      Subscribe to our Mailing List!
    </p>

• 2nd Content-Type’s Controls:
  • MailChimp API Key & List ID
  • Email Field Background Color: #eaeaea
  • Border Radius: 10px

Brick 2: Our Beloved Nashville (Video)

• Name: Our Beloved Nashville
• 1st Content Type: Text
• 2nd Content Type: Video
• Centered
• Brick Size: 0 Above and 50 Below
• 1st Content-Type’s Controls:
  • Font: 24 / Lato / Ultra Bold
  • Text:

    <p style="border-bottom: 2px solid #cccccc;">Our Beloved Nashville...</p>

    • The style adds a border on the bottom.
• 2nd Content-Type’s Controls:
  • Video URL: https://www.youtube.com/watch?v=QBnISkavbu4

Fixes

1. Make Social Links Grow

Add the following JS code in Add CSS/JS:

jQuery(".mp-stacks-sociallink").addClass("hvr-grow");

2. Make Social Links Float Left

Target the right Brick with the following CSS (change the brick number as needed):

@media screen and (min-width: 600px) {
  #mp-brick-31 .mp-stacks-sociallinks {
    float: left;
  }
  #mp-brick-31 .mp-stacks-sociallink:first-of-type {
    margin-left: 0 !important;
  }
}

3. Make the Mobile Menu Better

Target CSS with Mobile Problem When Admin Bar is Active:

.admin-bar #mp-menu-holder-inner .nav-inner {
  margin-top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #mp-menu-holder-inner .nav-inner {
    margin-top: 46px;
  }
}
@media screen and (max-width: 600px) {
  .admin-bar #mp-menu-holder-inner .nav-inner {
    margin-top: 0;
  }
}

Make Mobile Menu Text Larger:

#mp-menu-holder #mp-menu-holder-inner [role~="navigation"] ul li a {
  padding: 10px 0px 10px 0px !important;
  font-size: 16px;
  text-decoration: none;
}
#mp-menu-close-button-holder .mp-menu-close-button:before {
  font-size: 175%;
}

4. Make Buttons Grow

This is slightly different than shown in the video for better results:

jQuery(".mp-stacks-grid-load-more-container").addClass("hvr-grow");