The Sidebar, Miscellaneous Tips & Fixes

We now have a FULLY FUNCTIONING WEBSITE! That's amazing. I hope that you have enjoyed this part of the process. It can at times be tedious, but the results come quickly and there is instant gratification if you like that! Now we're going to tie up a few extra details such as the Sidebar, I'll give you some tips and we'll fix a few things that ultimately make our site better.

Sidebar

• Go to Widgets in your Wordpress Dashboard (Under Appearance)
• Delete all of the widgets and add 1 Sidebar Stack
• Go to one of the Blog posts, and add a Brick to that Stack

Brick 1:

• Mailchimp
  • 1st: Text
  • 2nd: MailChimp
  • Centered
• Brick Size: 0 Above and 50 below
• 1st Content-Type's Controls:
  • 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 BG Color: #eaeaea
  • Overall Size: 10 border radius

Brick 2:

• Our Beloved Nashville (Video)
  • First: Text
  • 2nd: Video
  • Centered
• Brick Size: 0 Above, 50 below
• 1st Content-Type's Controls
  • 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: (Any video)

  • https://www.youtube.com/watch?v=QBnISkavbu4

Fixes

• Make SocialLinks Grow: in add CSS/JS add the following JS code:

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

• Make SocialLinks Float Left
  • Target the right Brick, only 600px wide and higher (Be sure to change the brick number here!)

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

• Making the Mobile Menu Better
  • Targeted CSS with MobileProblem 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%; }

• Make Buttons grow: (This is a little different than in the video. It works muche better like this)

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