Jump to content

Changing layout of header / navigation

Recommended Posts

Hey everyone, I did a website for my friend. But now she's decided she really wants it to look like another website she's seen. But the logo is on the right, on the left is the social icons and search bar and the main navigation is underneath the logo. I'm really not sure how to achieve this look?!? Please could somebody help me?! 

Here's a picture of it for your reference.

Thanks so much for any help.

Screenshot_20230327_140209_Evernote.jpg

Link to comment

With Colored nav bar, add this to Design > Custom CSS

/* Fullwidth Nav background */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}
.header-display-desktop {
    flex-direction: column
}
.header-announcement-bar-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0px !important;
}
.header-nav-item--divider {
    padding: .1rem 0;
    border-right: 1px solid #000 !important
}
.header-nav {
    width: 100% !important;
    background-color: #20417f;
    padding-top: 5px;
    padding-bottom: 5px;
}
div.header-nav-item>a {
    color: white !important;
}

With Phone/Search

Do you use Personal or Business or Commerce Plan?

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

Hope this helps?!

On 4/5/2023 at 1:00 AM, tuanphan said:

With Colored nav bar, add this to Design > Custom CSS

/* Fullwidth Nav background */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}
.header-display-desktop {
    flex-direction: column
}
.header-announcement-bar-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0px !important;
}
.header-nav-item--divider {
    padding: .1rem 0;
    border-right: 1px solid #000 !important
}
.header-nav {
    width: 100% !important;
    background-color: #20417f;
    padding-top: 5px;
    padding-bottom: 5px;
}
div.header-nav-item>a {
    color: white !important;
}

With Phone/Search

Do you use Personal or Business or Commerce Plan?

 

20230409_151723.jpg

20230409_151541.jpg

Link to comment

Wow tuanphan, you are a legend. That worked. Thank you so much... 🙂

Would it be still be possible to move the header Logo to the right hand side of the site? Then the social icons and phone number to left hand side? + also can I change the navigation bar page colour that I'm on. All like in the picture below?

Sorry, I hope that makes sense?

Thank you.

Screenshot_20230327_140209_Evernoumb.jpg.d878cbfbb3590eadc036c3d141ab6c9e.jpg

Link to comment
On 4/21/2023 at 12:11 AM, VMAN7 said:

Sorry, you can view it again now...

Thank you.

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-actions.header-actions--left').appendTo('.header-nav-wrapper');
})
</script>

 

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

Thank you tuanphan.

Sorry but I meant not on the actual menu bar, but above where the white part is with the logo on it! Could I move the logo from the middle to the right-hand side. Then on put the social icons to the left-hand side on the white part opposite the logo. Above the menu bar... Like the picture below?!! Sorry I hope this makes sense.

Screenshot_20230327_140209_Evernoumb.jpg.d878cbfbb3590eadc036c3d141ab6c9e.jpg

Link to comment

Add to Design > Custom CSS

.header-actions.header-actions--left {
    float: left;
    position: absolute;
    top: calc(50% - 50px);
    transform: translatey(-50%);
    left: 1vw;
}
.header-title-nav-wrapper {
    justify-content: flex-end !important;
    align-items: flex-end;
}

 

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
  • John_SQSP changed the title to Changing layout of header / navigation
  • 2 weeks later...
On 5/10/2023 at 2:23 PM, TeresaAqua said:

Hello!

I use version 7.1 (Utica) and want to change the header like this: social media elements - navigation - logo

Is this possible? There is no layout with the logo on the right.

Thanks! Teresa

You can use layout Middle Logo - Right Nav/Social. Then share site url, we can give code to adjust these orders

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.