Mobile Nav Header

Public Ticket #14484

Conversation thread

MarshaLouise replied

5 years ago

Customer Reply

Thank you so much, that worked! :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

If you want to do like that, you need to edit the file inside this theme.

Please do following steps:

1/ Add more the code like on this image:

<div class="pcustom-icon-mobile">
    <a href="YOUR_URL_PUT_HERE"><?php penci_fawesome_icon('fas fa-heart'); ?></a>
</div>

Note: Change the "YOUR_URL_PUT_HERE" on the above code to the URL you want to go when users click on "heart" icon.

2/ Add more this code to Customize > Custom CSS:

.pcustom-icon-mobile {
    float: left;
    line-height: 60px;
    margin-left: 10px;
    font-size: 21px;
    display: none;
}
@media only screen and (max-width: 960px){
.pcustom-icon-mobile {
    display: inline-block;
}
}

Hope this helps,

Best Regards,

PenciDesign

MarshaLouise replied

5 years ago

Customer Reply

Hi,

I don't want it to be my logo. What I meant was a custom icon of mine that links to wherever I want it to link to.

Here's an example blog linking to her readers' favourites using a heart icon in her mobile header - https://www.recipetineats.com/

PenciDesign replied

5 years ago

Staff Reply

Hi,

You can add the logo on that place by go to Customize > Logo and Header Options > and check to "Display Logo on Horizontal Navigation on Mobile"

Best Regards,

PenciDesign

MarshaLouise started the conversation

5 years ago

Conversation Start

Hi,

Is there a way I can add an image link next to the mobile menu icon in the header? Where the social icons are but much closer to the menu icon.

Thank you

Want to join this conversation or access attachments? Sign in first.