Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Move Navigation Position


Rafida
Go to solution Solved by rwp,

Question

Site URL: https://rafida.org

Hey,

Is there a way to move a primary navigation item and retain its style.
We want to move an item from the primary navigation to be next to the secondary navigation, but don't want it to inherent the secondary navigation style.

I've attached a screenshot to make it more clear.

Site access:
https://rafida.org
pass: lastphasetesting3

 

Kind regards

Screenshot 2020-09-27 at 23.01.34.png

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

CSS #moving { color: #125781 !important; font-size: 14.5px !important; background: transparent !important; line-height: 0 !important; margin: 0 !important; } #moving .Header-n

All perfect! Thanks for your speedy help! Much appreciated sir.

This block of code sets that color, you can replace it with any color you like. #moving .Header-nav-folder-item { color: rgba(176,176,176,.4) !important; }  

Posted Images

8 answers to this question

Recommended Posts

  • 0

Replace the #moving css with this:

#moving {
    color: #737373 !important;
    font-size: 22.6px !important;
    background: transparent !important;
    line-height: 0 !important;
    margin: 1px -.3em 0 2em !important;
}

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

CSS

#moving {
    color: #125781 !important;
    font-size: 14.5px !important;
    background: transparent !important;
    line-height: 0 !important;
    margin: 0 !important;
}

#moving .Header-nav-folder-item {
    color: rgba(176,176,176,.4) !important;
}

.Header-nav.Header-nav--secondary {
  display: flex !important;
}

Jquery

$(document).ready(function() {
  $('.Header-nav-item.Header-nav-item--folder').attr('id', 'moving');
  $('.Header-nav.Header-nav--secondary').append($('#moving'));
});

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

@rwp

Worked! Thank you so much.

Sorry to bother, but I missed a few things out.

The new screenshot below shows it with the code you provided.

Can I make the folder icon:
- Shift to the right a bit so it is next to the 'Search' icon
- Same size and colour as the search icon
- Same space between itself and the search as search is from the customer icon

Basically to make it look like it's part of the far right menu (Search, Account, Card, Currency)

Thanks for the help! Really appreciate it.

Screenshot 2020-09-28 at 02.38.05.png

Link to post
  • 0

@rwp

Amazing, thank you!

Fine tuned the Margin to:    
margin: 0px -.9em 0em 1em !important;

The only thing now is the 'ABOUT' and 'CONTACT' menu items are not centred vertically in the navigation menu, as shown in the below screenshot.

Any way to fix this?

Screenshot 2020-09-28 at 03.14.25.png

Link to post
  • 0
.Header-nav.Header-nav--secondary .Header-nav-inner {
    padding-top: 5px;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

@rwp 

Sorry to bother again.
But it seems changing the Icon colour also changed the colour of the items inside the folder (see screenshot)

Is there a way for me to control the colour of the items inside the folder independently from the main icons itself?

Screenshot 2020-09-28 at 03.44.06.png

Link to post
  • 0

This block of code sets that color, you can replace it with any color you like.

#moving .Header-nav-folder-item {
    color: rgba(176,176,176,.4) !important;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...