Center the Site Title & Site Description

• 

  tbelloy · Member · Jan 20, 2017 at 9:28 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am looking to move the site title and site description to the centre of the page rather than the left side. Are you please able to help me with the CSS?

  I am also looking to move the ‘Search’ button from the right side to the left side. AND only show a magnifying glass rather than the search word. Is this possible?

  Thanks in advance.
  Thomas

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

• 

  thesacredpath · Member · Jan 21, 2017 at 4:34 am

  • Copy link

  Hi Thomas, given we have search and the secondary navigation on the right, what we can do is to center the title and description within the area between the left container edge and the secondary navigation. Add the following to the bottom of your custom CSS and see what you think.

  .site-header hgroup {
  	text-align: center;
  }
  .site-header hgroup .site-title, .site-header hgroup .site-description {
  	float: none;
  	width: 100%
  }

  When I narrow down my browser window, your site title starts to overlap the secondary menu. That is because there are no spaces to give the software a clue as to where to break it. I’d suggest trying a space on the left and right of the + sign so that the software can break the title into two lines on smaller screens.

• 

  tbelloy · Member · Jan 21, 2017 at 11:23 am

  • Copy link

  Hi and Thank you for that. It really helped and like you suggested I added a space on each side of the +.

  What I would really like to do is to centre the title so it is right in the middle and keep the secondary navigation on the right and move the ‘search” button to the left. That would basically mean having the title in the centre, the search button on the left of the title and the secondary navigation on the right of the title.

  Thanks again for your help.
  Thomas

• 

  thesacredpath · Member · Jan 23, 2017 at 8:05 pm

  • Copy link

  Thomas, due to the way the header is structured in the HTML this is difficult. First off, find the following three CSS rules in your custom CSS and remove them.

  .secondary-navigation {
  	display:block;
  	position:absolute;
  	bottom:-1.8em;
  	right:50%;
  }
  .site-header hgroup {
  	text-align:center
  }
  .site-header hgroup .site-title,.site-header hgroup .site-description {
  	float:none;
  	width:100%
  }

  Then add the following at the very bottom of your custom CSS.

  @media screen and (max-width: 890px) {
  	.site-header hgroup {
  		float: none;
  		max-width: 100%;
  		text-align: center;
  	}
  	#masthead {
  		margin-top: 30px
  	}
  }
  @media screen and (min-width: 768px) {
  #masthead {
  	position: relative;
  }
    .header-nav-search-container {
  	 position: initial;
  	 width: 100%;
    }
    .header-search {
    	position: absolute;
    	left: 0;
    	width: 150px;
    	top: -50px;
    }
    .secondary-navigation {
    	position: absolute;
    	right: 0;
    	top: -60px;
    	width: 150px;
    	margin-right: 0
    }
    .site-header hgroup {
    	width: 100%;
    	text-align: center;
    }
    .site-header hgroup .site-title, .site-header hgroup .site-description {
    	margin-left: 0;
    	float: none;
    	width: 100%;
    }
  }
  @media screen and (max-width: 767px) {
  	.site-header hgroup {
  		max-width: 100%;
  		width: 100%;
  		margin-left: auto;
  		margin-right: auto;
  	}
  	.header-nav-search-container {
  		max-width: 400px;
  
  		margin-left: auto;
  		margin-right: auto;
  		float: none;
  	}
  	.site-header hgroup .site-title, .site-header hgroup .site-description {
  		margin-left: 0;
  	}
  	.secondary-navigation {
  		padding-left: 20px;
  		margin-right: 20px;
  	}
  	#masthead {
  		margin-right: 10px;
  		margin-left: 10px;
  	}
  }