Header - Logo - Menu Icon

Home › Forums › Jevelin Theme › Header – Logo – Menu Icon

Home › Forums › Jevelin Theme › Header – Logo – Menu Icon

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

  • zapata
    Participant

    <p class=”p1″>Hello.</p>
    <p class=”p1″>Is there a way of centering the mobile menu icon with the logo centralised above the menu icon?</p>
    Thanks.

    Shufflehound Support
    Moderator

    Hi @zapata,

     

    Thank you for your question.

     

    I am not sure what you are referring as mobile menu icon so could you please share me the screenshot of it?

     

    Best regards,
    Shufflehound team

    zapata
    Participant

    Hi,

    Could it be centred like the screenshot ‘mobile visual’?

    It’s currently like screenshot ‘mobile’.

    Thanks.

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

    Shufflehound Support
    Moderator

    Solution for this topic

    You can achieve 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 Code

     

    .sh-header-mobile-navigation .sh-table-cell {
    display: block;
    text-align: center;
}

.sh-header-mobile-navigation .sh-nav-container,
.sh-header-mobile-navigation .header-logo {
    float: none;
    display: table;
    margin: 0 auto;
}

    zapata
    Participant

    Thanks, now looks much better!

    However, if you look at the attachments, the icon appears on the right of the centre line, whilst the menu text appears to the left.

    Is there a way of tightening up the alignment of both the icon and the menu text so they are centred through the centre line?

    Thanks.

     

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

    Shufflehound Support
    Moderator

    Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

    zapata
    Participant

    Hi,

    I’m currently hosting my site locally whilst its under development.

    Can you advise further please?

    Thanks.

    Shufflehound Support
    Moderator

    I couldn’t reproduce it on my test site so can’t resolve it until i access your site.

    zapata
    Participant

    Hi,

    The site’s URL is: recolodesign.com

    Thanks

    Shufflehound
    Moderator

    Hi there,

     

    Please try this CSS snippet bellow:

    .sh-header-mobile-navigation .sh-nav-dropdown {
    left: -24px;
    position: relative;
}

    Let us know if that works. 🙂

    zapata
    Participant

    Thanks – Both have moved a little but they’re not quite centred.

    The menu icon needs to go over slightly to the right and the text more so to the right please.

    If they could be centred to the facebook icon, that would be great.

    Thanks.

    Shufflehound
    Moderator

    Please try this CSS snippet bellow and let us know if that works (you can place it here – Admin Dashboard -> Appearance -> Theme Settings -> Custom Code -> CSS Code )

    .sh-nav-mobile .current_page_item > a {
    right: 0px!important;
}

.sh-header-mobile-navigation .sh-nav-dropdown {
    left: -8px!important;
}

    zapata
    Participant

    Hi,

    I’ve set the menu icon to -13px from your previous CSS and that is now fine – Thanks.

    Re. dropdown menu. The above code only moves  the ‘Home’ text and it pushes it slightly too far to the right.

    Can you supply a snippet that centres all 5 to the middle of the facebook icon below please?

    Thanks.

    Shufflehound
    Moderator

    Solution for this topic

    Sorry for that, we improved previous CSS snippet, so please try it:

    .sh-nav-mobile li.menu-item > a {
    right: 5px!important;
}

    zapata
    Participant

    Perfect! Thanks.

    Shufflehound
    Moderator

    Nice to hear that. 🙂

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