Changing The Header With Custom CSS

Hey everyone! 

I'm currently using the Miller template for my website, and I'm really happy with it, however the header that I have applied to all of the pages doesn't show up on my "blog" pages. Originally, it also didn't show up on my "Cart" page either, but I have since found some Custom CSS that bypassed that and allowed me to change the header of the cart page, adding a custom file and linking to it. I was wondering if there was any way that I could alter the Custom CSS to make it also apply the header to my blog posts, too? Ideally, I'd quite like to do it through Custom CSS instead of changing template, if at all possible. I've added images below of how the header is supposed to look, and then how it currently looks on my blog posts. Hopefully it's quite clear that on my blog posts, you can make out the faint outline of my logo on the top left, but everything else disappears into the background as it's white text. To clarify, I'm not after every blog post having a different header, I'd just like them to look the same as the rest of the website.

Here is the Custom CSS that I'm using for the Cart banner:

/* CSS for cart page banner -------- */
 #cart .Header {
   background-image: url(https://static1.squarespace.com/static/5d488b594df4f40001e6c15c/t/5da5faddc69e0005bf91ad06/1571158753245/Starfield+One+Small.png);
 height: 195px !important;
   p {color: white;};
   h3 {color: white;};
      h1 {color: white;};
      h2 {color: white;};
 
 }
 /* End of CSS for cart page banner -------- */

And my website address is galacticvideo.co.uk, in case that helps at all.

Thank you in advance!

6 hours ago, tuanphan said:

replace #cart with

.collection-type-blog.view-item

 

That did the job!  I knew it'd be something simple but I couldn't work it out for the life of me.

Thank you!

Is there code that will do this for a 7.1 site?

I initially had the navigation text colour set to white but it does not show up on the individual blog posts.

So, I would like to either force a background colour for individual blog posts (preferred) or the ability to change the nav text colour so it shows up against the white background (next best option)

On 1/10/2022 at 11:35 PM, MarcusAurelius said:

Is there code that will do this for a 7.1 site?

 

I initially had the navigation text colour set to white but it does not show up on the individual blog posts.

So, I would like to either force a background colour for individual blog posts (preferred) or the ability to change the nav text colour so it shows up against the white background (next best option)

 

use this CSS

body[class*="collection-type-blog"].view-item header#header a {
	color: red !important;
}

Hi! I would need to adjust my site header and footer to be like in the attached image. I attach the wanted (first pic) and the current (second pic) header and footer. I tried some code and managed to do a part of it, but would appreciate your help..

Thank you in advance!

Jelena

On 4/6/2023 at 4:56 PM, jsarac said:

Hi! I would need to adjust my site header and footer to be like in the attached image. I attach the wanted (first pic) and the current (second pic) header and footer. I tried some code and managed to do a part of it, but would appreciate your help..

Thank you in advance!

Jelena

What is your site url? We can check easier

My URL is https://clover-potato-a4g7.squarespace.com/config/design.

Password is anthropo123.

Thank you!

Jelena

On 4/14/2023 at 2:26 PM, jsarac said:

My URL is https://clover-potato-a4g7.squarespace.com/config/design.

Password is anthropo123.

Thank you!

Jelena

#Header

Add to Design > Custom CSS

@media screen and (min-width:992px) {
/* Fullwidth Nav background */
.header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}
.header-display-desktop {
    flex-direction: column
}
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0px !important;
}
.header-nav-item:hover {
    background-color: #6e6843 !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;
}
.header-nav:before {
    display: none;
}
div.header-nav-item>a {
    color: white !important;
}

.header-title-logo {
    text-align: center;
    margin-bottom: 20px;
}

.header-title-logo a:after {
    content: "European Anthropological Association";
    position: relative;
    display: block;
    white-space: nowrap;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
}
.header-title {
    width: 100% !important;
}
}

#With social icons

Do you use Personal/Business or Commerce Plan?

Thank you so much!

I would say Personal/Business Plan... Could the social icons be located on the right side and the logo on the left side, in the same height as the navigation bar? If it's possible, of course..

Thank you so much!

Jelena

On 4/17/2023 at 2:29 PM, jsarac said:

Thank you so much!

I would say Personal/Business Plan... Could the social icons be located on the right side and the logo on the left side, in the same height as the navigation bar? If it's possible, of course..

Thank you so much!

Jelena

Hi,

personal or business?

It's not personal, it's for an international society, so I would say business..

J.

On 4/19/2023 at 4:52 PM, jsarac said:

It's not personal, it's for an international society, so I would say business..

J.

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--right').appendTo('.header-nav-wrapper');
})
</script>
<style>
  .header-nav-wrapper {
    display: flex;
    align-items: center;
}
.header-nav-wrapper>div:last-child {
    display: none;
}
nav.header-nav-list {
    flex-wrap: nowrap;
    width: 50%;
}
.header-actions.header-actions--right {
    padding: 0 !important;
}
</style>