Place logo above navbar (secondary header?)

Site URL: https://frog-vuvuzela-w66t.squarespace.com/config/pages

hello!

I’m trying to create a header similar to the image below. I am guessing I need to create a secondary header above the navbar but am struggling to figure out the coding. Any advice?

7 hours ago, AHC said:

Site URL: https://frog-vuvuzela-w66t.squarespace.com/config/pages

hello!

I’m trying to create a header similar to the image below. I am guessing I need to create a secondary header above the navbar but am struggling to figure out the coding. Any advice?

Your site is private. Can you setup password & share url?

Just switched it thank you. 

Password is Veritas123

frog-vuvuzela-w66t.squarespace.com

Which plan do/will you use?

Add to Design > Custom CSS

.header-title-nav-wrapper {
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
}

Business Plan 

@tuanphan

Is there a way to target the background color to only be behind the navigation bar, not the logo and the button? And also align the button and logo to the same height?

.header-title-nav-wrapper {
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
}

//change navbar background//
.header-nav {
      background-color: rgb(18,33,54);
      width: 150vw !important;
      align-items: flex-start;
      height: 6vw !important;
      line-height: 6vw;
    margin-top: 2vw;
}

//full width header//
.header{
      margin-left: -5vw
}

//reset logo location//
.header-nav{
      padding-left: 5vw !important;
}

.header-title-logo img{
      padding-left: 4vw !important
}

//fix mobile//
@media screen and (max-width: 646px) {
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
    color: black !important;
  }
}

This is what I have currently but it has a lot of problems. The button disappears on desktop view and the burger isn’t showing on mobile. Also at a certain width it adjusts and you can’t see the navbar. 

Any suggestions?

I think we need to use jQuery code to remove current button/add new button in new position, then can achieve full with colored navigation bar.

I will test some code & let you know soon.

Thank you!

Hi there! I'm also trying to do the same logo & button above nav/page menu with a dividing line in between (see image below). Any suggestions which code might work? 

For reference, the website is: https://www.ldmcounselling.net/

Thanks so much! 

14 hours ago, CM_Jag said:

Hi there! I'm also trying to do the same logo & button above nav/page menu with a dividing line in between (see image below). Any suggestions which code might work? 

For reference, the website is: https://www.ldmcounselling.net/

Thanks so much! 

Add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop .header-nav').appendTo('.header-display-desktop');
})
</script>
<style>
  .header-nav {
    width: 100% !important;
    padding-left: 0 !important;
    border-top: 1px solid black;
    padding-top: 10px;
    margin-top: 10px;
}

.header-display-desktop {
    flex-wrap: wrap;
}

nav.header-nav-list {
    width: 100% !important;
    justify-content: flex-start !important;
}
</style>

@tuanphan this is amazing!! thank you! Is there anyway to center align the nav.header-nav-list under the logo & button? 

On 2/21/2024 at 9:10 PM, CM_Jag said:

@tuanphan this is amazing!! thank you! Is there anyway to center align the nav.header-nav-list under the logo & button? 

 

change flex-start

to

center