adding a top bar/row to website header

Posted in: Newspaper
Post count: 3

Hello,

I’m having a problem adding a row in my header. I amusing TagDiv composer and looks ok and works OK in the desktop/tablet version but when I switch to mobile version the row doesn’t appear … and If I add manually a copy of that row in the mobile version then the row stops working in my desktop tablet version because the code that is in an element of that row can only be executed once per page.

How can I do that the same row is shown in mobile and desktop versions?

its a custom topbar with a news ticker.

Post count: 35449

Hi,
If that code should be run only once in the page ,I think it will not be easy to make the code to work in the header, since the theme is using 2 separate headers, one for desktop and one for mobile.
Please set the code on the desktop version and please provide a link to the website. I will try to see if I can create a custom css to display that row on mobile (please add a custom class on that row to be easier to be trigger – https://i.imgur.com/hofM57F.png ).
Thank you!

Post count: 3

Thanks for your help Calin. Here is the URL: https://www.merca2.es/

The black topbar is the newsticker I want to also show in the mobile version. I set custom class to the row to newsticker

Post count: 35449

Hi,
Please try this custom css:
.td-header-desktop-wrap {
display: block;
}

.td-header-desktop-wrap .tdc_zone .tdc-row {
display: none;
}
.td-header-desktop-wrap .tdc_zone #tdi_17.tdc-row {
display: block;
}

Can the CSS be set in the theme panel > custom code> advance css > phone – https://i.imgur.com/r2gFvDQ.png

Post count: 3

Thanks, it works !!!!! .. now I just need to figure out how to show on top, before the logo/menu

thanks!!

Post count: 35449

Hi,
For that add this extra css:
.td-header-template-wrap { display: grid; }
.td-header-desktop-wrap { order: 1; }
.td-header-mobile-wrap { order: 2; }

Thank you!

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newspaper’ is closed to new topics and replies.