Center a Site Title

password: mamaswhodream

Hi! I am finding my site title a bit boring so trying a few things. Does anyone know how to center a site title? So, if you look at my site it would be: learn more, cost information, *Mamas Who Dream*, retreats, contact. Essentially 2 navigation links on either side of the site title. 

Thanks!

Hi!

A site link would be wonderful so people can look into it

@ArminB ah! sorry, duh: 

https://pomegranate-aardvark-8rjz.squarespace.com/

On 12/20/2022 at 9:10 PM, kaydotjpg said:

ah! sorry, duh: 

https://pomegranate-aardvark-8rjz.squarespace.com/

First, change header layout to Left Nav - Middle Site Title

Then we can give some code to achieve your request

@tuanphan Okay! I did that, thanks- what's next? 

On 12/27/2022 at 9:11 PM, kaydotjpg said:

@tuanphan Okay! I did that, thanks- what's next? 

Add to Last Line in Code Injection > Footer

<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  /* Fix dropdown */
.header-actions--right .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    padding: .5em 1em;
    text-align: left;
    width: 200px;
    z-index: 10;
    margin-left: -1em;
}
.header-actions--right a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-actions--right .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}
</style>

@tuanphan Thank you ! This worked perfectly.  However, the nav links where slightly pushed far out to the sides. 

I also put a boarder around the header. You helped me do this once for another site. So I added that same coding to this current site, however, the spacing is off. Could you me figure this out? 

https://pomegranate-aardvark-8rjz.squarespace.com/

Password: mamaswhodream

On 12/29/2022 at 10:27 PM, kaydotjpg said:

@tuanphan Thank you ! This worked perfectly.  However, the nav links where slightly pushed far out to the sides. 

I also put a boarder around the header. You helped me do this once for another site. So I added that same coding to this current site, however, the spacing is off. Could you me figure this out? 

https://pomegranate-aardvark-8rjz.squarespace.com/

Password: mamaswhodream

You mean fix this problem?

@tuanphan yes! I need to fix the problem you screen shotted above 

https://pomegranate-aardvark-8rjz.squarespace.com/

Password: mamaswhodream

On 1/2/2023 at 11:01 PM, kaydotjpg said:

@tuanphan yes! I need to fix the problem you screen shotted above 

https://pomegranate-aardvark-8rjz.squarespace.com/

Password: mamaswhodream

First, remove this CSS

.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important
}

Next, add this CSS

.header-display-desktop {
    flex-direction: row !important;
}

@tuanphan This helped a bit! But something is still a little off, hmmm.....

https://pomegranate-aardvark-8rjz.squarespace.com/

Password: mamaswhodream

@tuanphan I ended up using an alternative header- it was just getting too tricky. Thank you for your help!