Jump to content

Adding nav item to the outside of mobile menu

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Site: https://becomingyouwithjulie.com

My search icon image url: https://static1.squarespace.com/static/613ce2c584a12d65875f02ff/t/663d2a386d8c9d3f4e56f193/1715284536428/search-icon-2048x2048-cmujl7en.png

I am trying to get rid of the “search” navigation item I have on my mobile site and replace it with a search icon. The problem I am facing is I don’t know how to move navigation items actually OUT of the mobile menu and into the header with the hamburger icon and logo.

What I’m going after:

Screenshot2024-05-13at7_59_31PM.png.fe434be55729c4c5f1612dadbf0196cd.png

My website:

Screenshot2024-05-13at7_55_59PM.thumb.png.5cf7cc0ec7e52be015f7905c83cbf1e4.png 

 

I already have code to get rid of the search in the mobile menu. All I need is the code on how to either create or transform the search navigation item into an image (like I have on desktop) and code to move it out of the mobile menu and into the header. But either way here’s the code I’m using:
// HIDE HEADER NAV LINKS ON MOBILE //
.header-menu-nav-list [data-folder="root"]>div:first-child>div>div:nth-child(6) {
  display: none !important;
}
  .header-menu-nav-list [data-folder="root"]>div:first-child>div>div:nth-child(6) {
  display: none !important;
}
 

I appreciate any help!

Thanks!

Edited by BYWJ
Added info
Link to comment
  • Replies 5
  • Views 198
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

Add this code to Website > Website Tools > Code Injection > FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a href="/search"><img src="https://static1.squarespace.com/static/613ce2c584a12d65875f02ff/t/663d2a386d8c9d3f4e56f193/1715284536428/search-icon-2048x2048-cmujl7en.png"/></a>').insertAfter('.header-display-mobile .header-mobile-logo');
});
</script>
<style>
  .header-mobile-logo+ a img {
    width: 30px;
}

.header-title.header-title--use-mobile-logo {
    display: flex;
    align-items: center;
}

.header-mobile-logo+a {
    position: relative;
    right: 6vw;
}
</style>

image.png.b22a65acb6e8b65659d0d0342a76558a.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

Change this code

.header-title.header-title--use-mobile-logo {
    display: flex;
    align-items: center;
}

to this code

@media screen and (max-width:767px) {
.header-title.header-title--use-mobile-logo {
    display: flex;
    align-items: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.