Important Mobile Version

• 

  thesacredpath · Member · Jun 20, 2017 at 2:04 am

  • Copy link

  In your custom CSS, change this

  .page-title:last-child {
  	display:none
  }

  into this.

  .page-header {
  	display:none;
  }

• 

  foosboleros · Member · Jul 6, 2017 at 6:22 am

  • Copy link

  Thank you so much.

  Would there be a snippet for the following. If you look at the menu bar in the main page, is there a snippet to erase the gray divider in that menu bar just before “La Cancha” category? but just for that category.

• 

  thesacredpath · Member · Jul 11, 2017 at 3:06 am

  • Copy link

  You are welcome.

  On the border, we can use the unique menu item CSS id to remove the left border on the first menu item.

  #menu-item-683 a {
    border-left: none;
  }

• 

  foosboleros · Member · Jul 23, 2017 at 7:15 am

  • Copy link

  It worked perfect. Thanks.

  Would there be a snippet to make the whole navigation bar be the color of the tittle (black) so it can look in one piece and with the category text be white?

  And also a snippet to make the tittle of the site “The Moxie Blog” be positioned just a little to the right so it can start the same as the last post image (dodgers image).

• 

  thesacredpath · Member · Jul 25, 2017 at 7:41 am

  • Copy link

  For the navigation color change, add this.

  .main-navigation-wrap, .main-navigation li {
    background-color: #333;
    borde

  r-top: none;
  }
  On the site title, the whitespace between the left edge of the top left image and the border of the browser window changes depending on the width of the browser window. If you widen and narrow your browser window you will see how it changes. It would be very difficult to get the title and the top left image to always be in vertical alignment.

• 

  foosboleros · Member · Aug 4, 2017 at 3:52 am

  • Copy link

  It worked perfectly.

  Would there be a snippet to add a text next to “The Moxie Blog” title in the main navigation? so it can say. The Moxie Blog by El Capi.

• 

  thesacredpath · Member · Aug 4, 2017 at 8:11 pm

  • Copy link

  Super.

  To add some text beside your site title, add the following to your custom CSS.

  .site-title a:after {
    content: "by El Capi";
    font-size: 50%;
    padding-left: 15px;
  }

  You can adjust the font size and edit the content between the quote marks as desired.

• 

  foosboleros · Member · Aug 4, 2017 at 9:10 pm

  • Copy link

  It looks awesome. Thanks.

  Now would there be a snippet for the following requests.

  1. Is there a snippet to not have that “by El Capi” text but on the mobile versions, for the text to appear in the computer site but not mobile.

  2. I uploaded a pic into my media so you can see how does it look on the mobile version. Is there a snippet to make the title of the Site with the after text smaller so all of it can fit horizontally?

• 

  thesacredpath · Member · Aug 7, 2017 at 7:12 pm

  • Copy link

  To make the added text show only on desktop, change the code I gave you to this.

  @media screen and (min-width: 600px) {
  .site-title a:after {
    content: "by El Capi";
    font-size: 50%;
    padding-left: 15px;
  }
  }

  If you want to keep the additional text on mobile, but get it all onto one line, then use the following instead.

  .site-title a:after {
   content:"by El Capi";
   font-size:50%;
   padding-left:15px;
  }
  @media screen and (max-width: 600px) {
    .site-title a {
      font-size: 50%;
    }
    .site-title a:after {
      font-size: 65%;
    }
  }

• 

  foosboleros · Member · Aug 8, 2017 at 6:25 am

  • Copy link

  They both worked perfectly. You do such an amazing job. Thanks.

  On that same mobile version, is there a way to convert the menu toggle to be three lines (there’s a recent image in my media as an example) instead of the menu words with the rectangle as it is right now?.

• 

  thesacredpath · Member · Aug 8, 2017 at 9:22 pm

  • Copy link

  You are welcome and thanks.

  For the touch device menu toggle, try this and see what you think.

  button.menu-toggle {
    color: transparent;
    border: none;
    background: url('https://elcapicap.files.wordpress.com/2017/08/img_1292.jpg') no-repeat scroll top center / contain
  }