Skip to content
Public Ticket #27442

Encabezado y top bar fijos

Conversation thread

maomixes82 replied

Customer Reply

Gracias todo está correcto. ?

PenciDesign Supporter replied

Staff Reply

Hi,

Please modify the CSS code:

@media only screen and (max-width: 480px) {
    .penci_navbar_mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    body {
        padding-top: 110px;
    }
}

Regards,
PenciDesign.


maomixes82 replied

Customer Reply

Hello, thank you, everything worked fine except that the top part of the content is cut off (I attach screenshots). Could this detail be fixed while preserving the configuration you already have for the fixed top bar and header?

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 480px) {
    .penci_navbar_mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    body {
        padding-top: 80px;
    }
}

Regards,
PenciDesign.



maomixes82 replied

Customer Reply

As you can see, the top bar is not always fixed. When you scroll down, the top bar also goes up. Then, as you continue scrolling, the top bar returns and lowers, creating a jump that scrolls all the content below it. That is, it generates a CLS. 

I only enabled the option on the home page: so as not to cause problems on individual articles. Here is the url where https://www.la.10.com.co is activated. 

Attached are screenshots of how the top bar starts and what happens when you scroll. I'll come back and send an example URL so you can see what I want it to look like. Apparently you haven't looked at the example URL and that's why you haven't understood the problem. Thank you, I hope you can help me this time.

URL de ejemplo. Por favor mirarla y hacer scroll para que veas el comportamiento del top bar en el ejemplo: 

https://bolavip.com/co/millonarios/presidente-de-millonarios-entrega-la-mejor-noticia-del-ano-a-los-hinchas-20240125-BCO-46227.html

PenciDesign Supporter replied

Staff Reply

Hi,

I've checked your site on my device, and the header and banner are always fixed at the top of your site.

https://imgur.com/a/N7LKNia

Regards,
PenciDesign.


maomixes82 replied

Customer Reply

Hello, I am not talking about the Google banner. I am talking about the fact that the top bar and header do not stay fixed at the top as I showed in the previous messages. Did you read the previous messages? When you move down the top bar disappears and returns and appears, generating a jump. What I want is for the top bar and header to always remain fixed as in the following example: 

https://bolavip.com/co/futbolcolombiano/con-millonarios-campeon-asi-quedo-el-palmares-de-equipos-con-mas-titulos-oficiales-en-el-fpc-20240125-BCO-46056.html

and the css code you gave me above had no effect.

PenciDesign Supporter replied

Staff Reply

Hi,

The problem is that Google still hasn't delivered the ads banner to this area.

Please wait a few hours and then check again.

Regards,
PenciDesign.


maomixes82 replied

Customer Reply
Hi, I just made the changes and cleared all the caches but it had no effect. What could have gone wrong? attached screenshots

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (min-width: 1170px) {
    .sticky-apply {
        display: none !important;
    }
}

Regards,
PenciDesign.



maomixes82 replied

Customer Reply

I've turned on the header on the home page so you can see what's happening. Additional the ad that I placed in the top bar without deferred loading. Can you help me with this as well as what I asked you in the previous message? Thank you.

maomixes82 replied

Customer Reply

Hello, I have followed the instructions in the video and managed to configure the header. The problem is that it keeps happening that when you scroll down the header and top bar do not stay fixed all the time. 

That is, when the initial scroll is made, the header and top bar disappear for a moment and then appear and remain fixed there. What I want is for the header and top bar to never move from their position or disappear for a second to reappear, since this causes a small jump and therefore causes a CLS in the core web vitals. 

Can you help me so that the header and top bar always remain fixed? This error occurs mainly in the mobile version. For now I don't have it enabled and that's why I'm sending you the preview link. 

https://www.la10.com.co/?view-header-layout=235904

I am also attaching screenshots for your better understanding. and I also put a link to an example page where the header and top bar remain fixed as long as it is the final result I want.

https://bolavip.com/co/europa/chelsea-no-se-daria-por-vencido-e-iria-con-todo-por-el-fichaje-de-jhon-jader-duran-20240124-BCO-45816.html

PenciDesign Supporter replied

Staff Reply

Hi,

If you wish to replicate the header layout seen on the site you provided, please create a custom header layout using the Penci Header Builder, following the instructions in the video document below:

Regards,
PenciDesign.


maomixes82 replied

Customer Reply

Hello, I have put the ad in the header of the site, but when I scroll, the header does not stay fixed and the ad disappears. (attached screenshots). The idea is that the header remains fixed so that the ad is always displayed.

I don't know if maybe you haven't understood my idea. I would like it to look like the page at the following link:

https://bolavip.com/co/europa/chelsea-no-se-daria-por-vencido-e-iria-con-todo-por-el-fichaje-de-jhon-jader-duran-20240124-BCO-45816.html

maomixes82 replied

Customer Reply

Hi, thanks for your response. How should I make a top banner appear just like in the attached image?

PenciDesign Supporter replied

Staff Reply

Hi,

1. I've checked your site on my browser, and the header is now already fixed on the top,

2. If you want to put the ads banner on the top header mobile, please use the ads manager plugin here: https://wordpress.org/plugins/search/ads+manager/

3. Please write all the requested content in English.

Regards,
PenciDesign.


maomixes82 replied

Customer Reply

Hola, complementando la respuesta anterior apliqué el código que me diste en el css y borré todas las caches, pero el cambio no se ve reflejado. Me puedes ayudar también con esto? 

maomixes82 replied

Customer Reply

Hola gracias por tu ayuda. Es posible poner un espacio arriba del menú igual que en el ejemplo de la captura de pantalla que te envío? La idea es poner allí en ese espacio un anuncio y que quede fijo tal cual como en la página de ejemplo. Gracias 

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (min-width: 1170px) {
  .penci-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
  }
  body {
    padding-top: 87px;
  }
}

Regards,
PenciDesign.

Want to join this conversation or access attachments? Sign in first.