WordPress.org

Support

Support » Themes and Templates » Spun » [Resolved] Center menu and logo

[Resolved] Center menu and logo

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

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

    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 ‘[Resolved] Center menu and logo’ is closed to new replies.
Skip to toolbar