Center menu and logo

  • Resolved da1k

    (@da1k)


    10 years, 8 months ago

    Hello,

    I preparing new blog with spun theme, blog is here. It is under construction so there is only let we say ‘framework’. I already made spun child theme and I installed Custom CSS Manager. I also changed few things but I still can’t finish with others. I was looking for it but can’t find working solutions. If anybody known solution please help me.

    What I wanted to is to center logo and put it above menu, menu should also be centered. I wish also to turn off hover for menu and logo (I want hover for rest).

    best regards,

Viewing 4 replies - 1 through 4 (of 4 total)

  • It looks like you’ve already managed to get your navigation centered, but try this for logo:

    .header-wrapper {
    display: block;
    float: none;
    width: 100%;
}
.header-wrapper a[rel^=home] {
    display: block;
    max-width: 150px; /* your logo's desired max-width here*/
    margin: 0 auto;
}

    and for navigation, which you already seem to have solved: 

    .main-navigation {
    float: none;
    width: 100%;
}
.main-navigation .menu > ul {
    text-align: center;
}
    Thread Starter da1k

    (@da1k)

    Hi,

    Thanks for code to center logo. Do you know how remove hover from menu ?

    best regards,

    The hover seems to be applied to the whole header area with this block of code from original theme: 

    .site-header {
	clear: both;
	display: block;
	min-height: 30px;
	padding: 30px 0;
	position: relative;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	width: 100%;
}
.site-header:hover,
.site-header:focus {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}

    If we wanted to remove the entire effect from the header this would work: 

    .site-header {
	opacity: 1;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}

    However, it sounds like you just want to remove the hover effect from the navigation, but leave on the logo. So we would have to be a little more elaborate in customizing, try: 

    .site-header {
	opacity: 1;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}
.header-wrapper {
        opacity: 0.5;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}
.header-wrapper:hover,
.header-wrapper:focus {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}
    Thread Starter da1k

    (@da1k)

    wow! ?? thank you, thank you, thank you very much ??
    This is what I need ! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Center menu and logo’ is closed to new replies.