Jump to content

Splitting navigation, drop down menu questions

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

 

I am wanted to split the navigation between the 3rd and 4th of my navigation links and moved to an attractive edge of the left and right sides of screens. There is also a shopping bag on the site. Please advise on how to do this effectively.  

Additionally, I am wanting to have my drop down menus appear as mega menus (full width of viewing platform) without using mega menus, but with the text content of the drop down aligned left with the navigation. 

Thanks!

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • Solution
On 12/5/2023 at 6:55 PM, Molololol said:

Yep! @tuanphan

Add this code to Last Line in Code Injection > Footer

<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(3) {
    margin-right: 2.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
    color: var(--solidHeaderNavigationColor) !important;
}
</style>

image.thumb.png.4820c37d1ccf89629dff1167a7045f81.png

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
On 12/7/2023 at 5:17 PM, Molololol said:

Hi @tuanphan I've sorted this to make it how I'd like -- but this doesn't allow my mega menu on the 4th link to work. Please advise. Thanks!

Which mega menu plugin did you use?

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

You can use this code to Website Tools (under Not Linked) > Custom CSS. However it will have overlap problem on some screen sizes (If you see this, you can let me screen sizes and I will give extra code)

div.header-nav-item:nth-child(4) {
    position: absolute;
    right: 5vw;
}
div.header-nav-item:nth-child(3) {
    position: absolute;
    right: 8vw;
}

 

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
On 12/11/2023 at 4:37 PM, Molololol said:

Thanks @tuanphan I will have a go at this in a bit. Another worry I am having is that on mobile my header is not central. Any chance you could help with that? Thanks!

Header is fine to me

image.png.6bbb2c083e1e1c374925b6b4f264354f.png

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.