WordPress.org

Forums

Spun
[resolved] Center menu and logo (5 posts)

  1. da1k
    Member
    Posted 1 year 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,

  2. Damon Cook
    Member
    Posted 1 year ago #

    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;
    }
  3. da1k
    Member
    Posted 1 year ago #

    Hi,

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

    best regards,

  4. Damon Cook
    Member
    Posted 1 year ago #

    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;
    }
  5. da1k
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.