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

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;
	}
}

The topic ‘Center Logo on Edin’ is closed to new replies.