Header Bar Alterations

Hi there,

On this page https://thelanguagesherpa.com/russian-guide/ I have a sticky bar in the header set up to appear once you scroll down the page a bit. I have two questions related to it:

  1. Do you know how I can make the bar taller? I have tried going into the bar’s settings -> dimensions and then increasing the height, but this doesn’t make any difference. Do you know what I’m doing wrong here?

  2. I have pagination set up for this page. I would like to have this bar appear on the first page, but for it to be hidden for the urls https://thelanguagesherpa.com/russian-guide/2/ and https://thelanguagesherpa.com/russian-guide/3/

Do you know how I can achieve this?

Thank you!
LS

Hello @riugn557,

Thanks for asking. :slight_smile:

  1. I see that you are using WP Rocket cache plugin. Can you please try clearing the cace and altering the values of height of the bar should reflect the changes? Please see screencast. https://cloudup.com/coUF5NhgvZB
  2. If you would like to hide the bar on certain pages, then please add a class name to the bar under Customize > Class. For ex hide-bar-page and then add following CSS under Pro > Theme Options > CSS:
.page-id-38 .hide-bar-page {
    display: none;
}

In above code I have used page Id to hide the bar. If you would like to find out page id, please take a look at following article:

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Hi Prasant,

  1. That’s great, thank you.

  2. The problem is that I’m not trying to hide the bar for a different post - I only want to hide the bar for the second and third page of the article. This means that I do not have different post-IDs for each of these paginated parts of the article…

LS

Hi,

For #2

You can add this in Header > CSS

.paged-2 .e667-35.x-bar,
.paged-3 .e667-35.x-bar {
    display:none;
}

Hope that helps

Hi Paul,

I used the following CSS:

.paged-2 .first.x-bar,
.paged-3 .first.x-bar {
    display:none;
}

.paged-1 .second.x-bar,
.paged-3 .second.x-bar {
    display:none;
}

.paged-1 .third.x-bar,
.paged-2 .third.x-bar {
    display:none;
}

As I have created three bars, the first one would only show on the first page, the second one on the second page, etc.

I used your code and gave them ‘first’, ‘second’, ‘third’ classes.

In general it is now working. However, I noticed that the second and third bars still appear on the first page, despite ruling this out in my CSS. Do you know what I’ve done wrong here?

Thank you!
LS

Hi @riugn557,

The second looks the same to third

Check the screenshot, the header that appears on page 1 and 2 has class e667-44 (the second), and below that is the e667-53 (the third). That two header bar are the same, so maybe you thought third is appearing on second and first page.

Thanks!

Hi Rad,

I have checked and it is what I was saying before:

Only the third bar appears on the third page, only the second bar appears on the second page, but all three appear on the first page which is not what I want.

LS

Hello There,

The bars can only be hidden in the different screen sizes using the “Hide During breakpoints” option. There is no option in Pro theme that you can hide the bar from a particular paged item. What you can do is to add an ID to each of your bars. For example IDs, bar-1, bar-2, bar-3. You can then use this custom css to show/hide the marked bars in each of the page like this

/* hide bar1 and 3 in page 2 */
.page-paged-2 .bar-1,  
.page-paged-2 .bar-3 {
  display: none !important;
}

/* hide bar1 and 2 in page 3 */
.page-paged-3 .bar-1,
.page-paged-3 .bar-2 {
  display: none !important;
}

There is no need to have a css for the first page since those 3 bars will be displayed by default.

Hope this make sense.

Hi Rue,

But this does not solve my problem - I don’t want the three bars to be displayed on the first page by default. I only want bar 1 to appear on the first page.

Why does the code that I posted above not achieve what I am trying to do?

LS

Hi @riugn557

Your code is correct and it should work just fine, except that there is no paged-1 class added to the body in case of the first page, hence your code isn’t working as it should.

I’ve modified your code a little bit, so here you are my workaround which I believe it will work:

.second.x-bar, .third.x-bar {
    display:none;
}

.paged-2 .first.x-bar,
.paged-3 .first.x-bar {
    display:none;
}

.paged-2 .second.x-bar {
    display: flex!important;
}
.paged-3 .third.x-bar {
    display:flex!important;
}

I’m sure you can easily understand what I wrote up there, however feel free to let me know if you have any related questions.

Thanks.

Thank you so much, Alaa, that worked perfectly!

LS

You’re welcome. Glad we could help.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.