Center Logo on Edin

• 

  nahaslegal · Member · Sep 29, 2016 at 3:30 pm

  • Copy link
  • Add topic to favorites

  How can I center my logo on Edin.
  Someone told me it’s by using CSS which I have no idea about…
  I am using the theme Edin for my website nahaslegal.com

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

• 

  thesacredpath · Member · Sep 29, 2016 at 9:32 pm

  • Copy link

  Given that the navigation is to the right of the logo, it is very difficult to center the logo and not have it overlap the navigation on narrower screens/windows. The following centers both of them with the logo on the top. See what you think with this.

  .site-branding {
      float: none;
      margin-left: auto;
      margin-right: auto;
      max-width: 600px !important;
  }
  .header-navigation {
      margin-left: auto !important;
      margin-right: auto !important;
      float: none !important;
      max-width: auto;
      text-align: center;
  }

• 

  nahaslegal · Member · Sep 30, 2016 at 10:17 am

  • Copy link

  Thank you, It did work. But now there is too much blank space between the logo and the menu, how can we narrow it

• 

  thesacredpath · Member · Sep 30, 2016 at 8:18 pm

  • Copy link

  This was a challenge. I’ve made a number of changes and additions and limited this to 1020px and wider screens since the menu changes to the touch device menu below that width. Add this and see what you think.

  @media screen and (min-width: 1020px) {
  	.site-branding {
  		float: none;
  		margin-left: auto;
  		margin-right: auto;
  		max-width: 600px !important;
  	}
   	.header-navigation {
  		margin-left: auto !important;
  		margin-right: auto !important;
  		float: none !important;
  		max-width: auto;
  		text-align: center;
  	}
  	.header-search {
  		position: relative;
  		top: -200px !important;
  	}
  	.navigation-classic .primary-navigation {
  		position: relative;
  		top: -140px
  	}
  	#masthead {
  		max-height: 250px;
  	}
  }