logo height

Home › Forums › Jevelin Theme › logo height

Home › Forums › Jevelin Theme › logo height

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    RESOLVED Posts

  • Elise_jansson
    Participant

    Hi,

     

    I have two questions:

    1. I am trying to make my logo full height on all my pages. I have succeeded with this on the home page and on the sticky navbar (see screen shot 2), however not on the rest of the pages when at the top, then there’s a gap at the top and bottom (see screen shot 3) even though I have played around with marin and padding a lot. Is there a way to achieve this?
    2. Is it possible to have a mobile-specific logo?

    I understand if you can’t help with customised styling so I apologise if this is outside what your support covers.

     

    Thanks in advance!

     

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    Hi @Elise_jansson,

     

    I hope you are well today and thank you for your questions.

     

    I am trying to make my logo full height on all my pages. I have succeeded with this on the home page and on the sticky navbar (see screen shot 2), however not on the rest of the pages when at the top, then there’s a gap at the top and bottom (see screen shot 3) even though I have played around with marin and padding a lot. Is there a way to achieve this?

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Cod

    #header-navigation .sh-nav a {
    padding-top: 21px;
    padding-bottom: 21px;
}

.sh-header .menu-item:nth-child(7) a {
    margin-top: 18px;
}

     

    Is it possible to have a mobile-specific logo?

    Yes we can achieve that developing custom CSS code.

     

    For this please share me the logo image URL from your site that you want to display on mobile.

     

    Best regards,
    Shufflehound team

    Elise_jansson
    Participant

    Hi, thank you so much, that’s perfect.

     

    Here is the link to the mobile logo:

    http://millarcallaghan.co.uk/wp-content/uploads/2018/04/Logo-white-04.png

     

    Also, I’ve been wondering how you get the blog post photos in the footer widget as on you page (see attached screen shot), I can only seem to get a list of the blog post without the option for circular images.

    Attachments:
    You must be logged in to view attached files.

    Elise_jansson
    Participant

    Also, my header/logo always looks perfect on my home page but never on my other pages. It is not as responsive there and the logo gets too big. What’s the difference in the code?

    I’ve tried to upload a smaller logo but then it ends up being bad quality.

    Shufflehound Support
    Moderator

    Solution for this topic

    You can display shared logo on mobile by using the following CSS code on your site.

     

    @media (max-width: 1025px){
    .sh-header-mobile-navigation .header-logo img{
        display: none;
    }
    
.header-logo-container .sh-table-cell {
    background: url("http://millarcallaghan.co.uk/wp-content/uploads/2018/04/Logo-white-04.png") no-repeat center;
    width: 386px;
    height: 114px;
    background-size: 100%;
    max-width: 100%;
}
}

     

     

    To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you on your new thread.

    Elise_jansson
    Participant

    Yes of course! Sorry about that, and thank you so much for the help 🙂

    Shufflehound Support
    Moderator

    You are most welcome 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)