Move Navigation Position

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

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'));
});

@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.

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;
}

@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?

.Header-nav.Header-nav--secondary .Header-nav-inner {
    padding-top: 5px;
}

All perfect!

Thanks for your speedy help! Much appreciated sir.

@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?

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;
}