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

Place logo above navbar (secondary header?)


Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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?

Veritas School  Classical Christian School  Richmond, VA.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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

Link to comment

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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


×
×
  • Create New...