Changing layout of header / navigation

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.

Hi,

This is possible but require a lot of custom code.

If you share link to your site, we can check easier

Hi tuanphan,

Great... 😊 Yes here it is.

https://www.care4everychild.com/

The password is - young people.

Thank you

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?

Thank you tuanphan.

I've added it to the Custom CSS and it is saying in red "Syntax Error on line"

It's a business plan.

On 4/7/2023 at 3:26 AM, VMAN7 said:

Thank you tuanphan.

I've added it to the Custom CSS and it is saying in red "Syntax Error on line"

It's a business plan.

Can you take screenshot all code in CSS box?

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?

On 4/9/2023 at 9:19 PM, VMAN7 said:

Hope this helps?!

 

Remove Line 01 from your CSS box. That code missing some CSS values

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.

On 3/31/2023 at 4:18 AM, VMAN7 said:

Hi tuanphan,

Great... 😊 Yes here it is.

https://www.care4everychild.com/

The password is - young people.

Thank you

Your site is private now. Can you check it again?

Sorry, you can view it again now...

Thank you.

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>

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.

Logo to the right of the Header. Social to the left of the Header.

Thank you.

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

The site is private.. Can you check it again?

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

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