Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #579993

    Hey guys,

    Love the theme. Just one quick question: I have the menu and logo position set to: logo left, menu right.
    And I would like to reduce the space between the logo and menu, so that the logo and menu can be closer and be in the centre in the header.

    #580001

    Hi amanbir!

    Add this to your custom CSS.

    strong.logo {
        left: 40%;
        transform: translateX(-50%);
    }

    Regards,
    Elliott

    #580056

    Hey Elliot,

    Thanks for the quick response. This did work, but I was also hoping to move the menu to the left as well. How can I do that?

    #580284

    Hi!

    Please use the below CSS to move menu to the left.

    .main_menu {
        right: auto!important;
        left: 40vw!important;
    }
    

    Best regards,
    Vinay Kashyap

    #580726

    Thanks guys worked like a charm!

    But i now noticed the logo is cut off on mobile. The menu is fine. So I added some custom css, which did align the logo correctly but half of it is cut off. I have uploaded a screenshot to my wordpress site, I have provided a link to it.

    Here is the code I added:

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    margin: 0 auto;
    max-width: 100%;
    width: 100% !important;
    position: relative;
    left: 77px;
    }
    }

    #580828

    Hi!

    Please change this block of code

    strong.logo {
    left: 30%;
    transform: translateX(-50%);
    }

    to

    strong.logo {
    left: 30%;
    transform: translateX(-30%);
    }

    We have updated the code in quick css to the below

    
    @media screen and (max-width: 767px) {
    .caption_bottom .slideshow_caption .slideshow_inner_caption { 
    	padding: 0px !important; 
    	max-height: 70vh!important;
    	overflow: auto!important;
    
    }
    }
    
    .main_menu a {
    color: white !important;
    }
    
    .main_menu {
        right: auto!important;
        left: 35vw!important;
    }
    
    strong.logo {
        left: 30%;
        transform: translateX(-40%);
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    margin: 0 auto;
    max-width: 80%;
    width: 100% !important;
    position: relative;
    left: 50px;
    }
    }
    

    Best regards,
    Vinay Kashyap

    • This reply was modified 8 years, 10 months ago by Vinay.
    #580878

    Hey Vinnie,

    Thanks a lot!

    #581962

    Hi!

    Glad we could help you with this. we really appreciate if you rate our theme on themeforest :)
    Please feel free to get in touch with us if you have any questions.

    Thank you for using Enfold :)

    Cheers!
    Vinay Kashyap

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Reduce space between logo and menu’ is closed to new replies.