Search result & post by author pages cut off

• 

  lifeismeantforexploring · Member · Apr 12, 2017 at 3:09 am

  • Copy link
  • Add topic to favorites

  Hi there,

  We have some custom CSS on our blog that makes our menu navigation/header stay in place as you scroll.

  However, we just realized that when you navigate to the “View all posts by [author]” at the bottom of a blog post, when it re-directs to a new landing page the title that says “Posts by [author]” is cut off and hidden behind our menu navigation.

  The same thing happens to page titles when displaying search results, or when we click on a category.

  We’d love any thoughts on how to fix this!

  Thanks,
  TJ & Alli

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

• 

  thesacredpath · Member · Apr 12, 2017 at 7:54 pm

  • Copy link

  Hi there, I looked carefully at your site at all screen sizes and in addition to the archive page title issue, found a few more. The issue on the author archive page also shows up on the category, date and tag archive page types as well. In addition, at certain page width, your site title is obscured and at small phone size widths, your site title partially overlaps the menu button. The following two sections of code should be placed at the very bottom of your custom CSS.

  These are the adjustments for archive type pages for visitors that are not logged in.

  /*header area adjustments for when NOT logged in*/
  @media screen and (min-width: 881px) {
  	.archive .site {
  		margin-top: 140px;
  	}
  }
  @media screen and (max-width: 880px) {
  	.archive .site {
  		margin-top: 120px;
  	}
  }
  @media screen and (max-width: 495px) {
  	.archive .site {
  		margin-top: 160px;
  	}
  	.archive .site-branding {
  		width: 65%;
  	}
  }

  These are the adjustments for logged in visitors

  /*header area adjustments for when logged in*/
  @media screen and (min-width: 881px) {
  	.archive.logged-in .site {
  		margin-top: ;
  	}
  }
  @media screen and (max-width: 880px) {
  	.archive.logged-in .site {
  		margin-top: 120px;
  	}
  }
  @media screen and (max-width: 782px) {
  	.archive.logged-in .site-header {
  		padding-top: 55px;
  	}
  	.archive.logged-in .menu-toggle {
  		top: 65px;
  	}
  }
  @media screen and (max-width: 495px) {
  	.archive.logged-in .site {
  		margin-top: 160px;
  	}
  	.archive.logged-in .site-branding {
  		width: 65%;
  	}
  }

• 

  lifeismeantforexploring · Member · Apr 12, 2017 at 11:43 pm

  • Copy link

  Outstanding! Once again you have gone above and beyond. This seems to have worked perfectly and we really appreciate the help.

  You rock!
  TJ & Alli

• 

  thesacredpath · Member · Apr 13, 2017 at 3:54 am

  • Copy link

  Hooray and you are welcome!