Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 9, 2016 at 1:47 am #579993
    amanbir

    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.

    February 9, 2016 at 2:38 am #580001
    Elliott

    Hi amanbir!

    Add this to your custom CSS.

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

    Regards,
    Elliott

    February 9, 2016 at 4:13 am #580056
    amanbir

    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?

    February 9, 2016 at 11:17 am #580284
    Vinay

    Hi!

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

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

    Best regards,
    Vinay Kashyap

    February 10, 2016 at 3:21 am #580726
    amanbir

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

    February 10, 2016 at 7:00 am #580828
    Vinay

    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, 9 months ago by Vinay.
    February 10, 2016 at 8:07 am #580878
    amanbir

    Hey Vinnie,

    Thanks a lot!

    February 12, 2016 at 1:33 am #581962
    Vinay

    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

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