Docs

[brendanduggan11]

Hello,

I would like my blog page to have the header pushed to the very top of the blog index page and the blog postings. Also would like to have it black. I dont want it fixed like my webpage.

I would like to leave my home page as is.

Thank you

http://www.sunshinesalsatours.com/blog

[Jade]

Hi there,

Please add this code in the customizer:

.blog .x-navbar.x-navbar-fixed-top,
.single-post .x-navbar.x-navbar-fixed-top {
    position: relative;
    background-color: #000 !important;
}

Hope this helps.

[brendanduggan11]

Ok, I would also like it on my posts.

For example this page

http://www.sunshinesalsatours.com/2017/01/10/guide-to-cali-nightlife/

thank you

[Nico]

Hi There

I could see that it is working well already on that page.

Let us know how it goes if you need anything else.

Thanks.

[brendanduggan11]

Ok, the thing is that I would like the header to initially load as the black header without any transitions on both the blog page and any posts. Just a black header with white text, unfixed. As of now the page must be scrolled for the header to be pushed to the top. I would like it to load pushed to the top already.

Thank You.

[Jade]

HI there,

Please update this code:

.blog .x-navbar.x-navbar-fixed-top,
.single-post .x-navbar.x-navbar-fixed-top {
    position: relative;
    background-color: #000 !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span, 
.single-post .x-navbar .desktop .x-nav > li > a > span {
    color: #000 !important;
}

to

.blog .x-navbar,
.single-post .x-navbar {
    position: relative;
    background-color: #000 !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span, 
.single-post .x-navbar .desktop .x-nav > li > a > span {
    color: #fff!important;
}

Hope this helps.

[brendanduggan11]

Thanks it helps. but now we just need to push the navbar to the top of the blog posts pages:

EX:

http://www.sunshinesalsatours.com/2017/01/10/guide-to-cali-nightlife/

The main blog page is fine.

Thank you

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-post .masthead {
    height: 90px;
}

Hope that helps.

[brendanduggan11]

.blog .x-navbar,
.single-post .x-navbar {
position: relative;
background-color: #000 !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span,
.single-post .x-navbar .desktop .x-nav > li > a > span {
color: #fff!important;
}

Sorry, i lied. It seems the above code effected my main page turning the navbar white. I want to keep the main page(www.sunshinesalsatours.com) as is….

As of now the http://www.sunshinesalsatours.com/blog as well as the blog single post pages are pushed to the top of the page and are un-fixed as I would like. …

However, they are set to transition from white to black.

I would like to set them as a static color. ie. no transistion. Black with white text for now.

Thank you

[Joao]

Hi There,

The code above should not affect your home page.

I am a bit confused about what you are trying to fix, can you be pontual and point:

1- Change this on home…

2- Change this on blog..

Also please provide your admin credentials so we can check your code.

Thanks

[brendanduggan11]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

#1] You will need to update the JS code and use this:

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
	$('.home .x-navbar').css("background-color", "rgba(255,255,255,0.75");
	$( '.home .x-navbar' ).addClass( 'shadow' );
    } else {
	$('.home .x-navbar').css("background-color", "rgba(255,255,255,0.0");
	$( '.home .x-navbar' ).removeClass( 'shadow' );
    }
  });
});

#2] Please put the custom css again or make use of this code:

.blog .x-navbar,
.archive .x-navbar,
.single-post .x-navbar {
  position: relative;
  background-color: #000 !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span,
.archive .x-navbar .desktop .x-nav > li > a > span
.single-post .x-navbar .desktop .x-nav > li > a > span {
  color: #fff!important;
}

Please keep in mind that @ media css block should be at the end of other custom css. For example;

element {
  // your styling 
}

@media(max-width: 767px) {
  element {
    // your styling
  }
}

Hope this helps. Please let us know how it goes.

[brendanduggan11]

Ok, well atleast we are making progress!

But I have a few concerns: I see that the code is basically to transition the navbar from one color to another. Yes, I need this for my main page.

But, for my blog page and posts pages I just want a static no frills nav bar. Is there any way to distinguish this in the code. I,m concerned about page performance for unnecessary transitions in my blog navbar from say white to white or black to black…. when it could just be a static nav bar with white background and black text or black background and white text etc.

Also, How would I change the text color on transition if I am unable to do the above.

For example now, i have the background white with black text on pageload but when i scroll the text turns white (meanwhile the background stays white making the text indistuingishable) and logo appears. I would like the text to stay black when the page is scrolled and…. for the logo to appear when the page is loaded right from the get go.

Let me re-iterate… the above is solely for the blog page and posts pages… my main page I want to keep as is.

Thank you for helping me with this, I know it is a bit complicated to understand.

Thanks again,

Brendan

[Christopher]

Hi there,

But, for my blog page and posts pages I just want a static no frills nav bar. Is there any way to distinguish this in the code. I,m concerned about page performance for unnecessary transitions in my blog navbar from say white to white or black to black…. when it could just be a static nav bar with white background and black text or black background and white text etc.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Remove this code :

.blog .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span, .single-post .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span {
    color: #fff !important;
}

Hope it helps.

[brendanduggan11]

An example:

https://github.com/

a white navbar , black test, the logo is always there, no transitions,

thank you

…

remember this is only for the blog main page (www.sunshinesalsatours/blog) and posts pages such as (http://www.sunshinesalsatours.com/2017/01/10/guide-to-cali-nightlife/)

the http://www.sunshinesalsatours.com leave as is

….

Also the code you mentioned is not in the custom css

[Author]

Posts