Hello.
I would like to add a top header similar to https://ethnomuseum.pl
So on every page, have a EU banner with URL, but on the mobile version, it should disappear, and the new EU Logo with URL appear next to the hamburger menu, which I have on the top right corner. I use a child theme just in case.
Hello!
Have you noticed this support service is provided free of charge?
If you like the speed and accuracy of the resolutions, please consider supporting me with a donation. Thank you!
Hi fakamaka,
Please check out an information about theme modifications in theme documentation.
I’ve put together some code you can use in your child theme‘s functions.php file to start:
// Adding useful CSS.
add_action( 'wp_enqueue_scripts', function() {
wp_add_inline_style(
'angelica',
'@media (max-width: 1279px) { .hide-on-mobile { display: none; } }'
. '@media (min-width: 1280px) { .hide-on-desktop { display: none; } }'
. '.my-eu-banner { box-shadow: 0 0 2em rgba(0,0,0,.2); }'
. '.my-eu-banner .site-header-content { justify-content: center; }'
. '.my-eu-logo { max-width: 3em; margin-left: auto; margin-right: 1em; }'
);
} );
// Adding header top bar.
add_action( 'tha_header_top', function() {
echo
'<div class="site-header-section my-eu-banner hide-on-mobile">'
. '<div class="site-header-content">'
. 'YOUR_HTML_HERE'
. '</div>'
. '</div>';
}, 5 );
// Adding image after logo.
add_action( 'tha_header_top', function() {
echo
'<a href="YOUR_URL_HERE" class="my-eu-logo hide-on-desktop">'
. '<img src="YOUR_EU_FLAG_IMAGE_URL_HERE" alt="EU flag">'
. '</a>';
}, 15 );Please adapt the code to your needs and use your own images.
You might be interested…
Best regards,
Oliver Juhas
WebMan Design
Perfect. Thank you.
Top bar is working well.
I have a problem with image after logo. It’s displays but not inline and the size does not match the logo size.
I use this code to display it:
add_action( 'tha_header_top', function() {
echo '<a href="...">
<img src="..."
alt="Logo Dofinansowane przez Unię Europejską"
style="max-width: 100%; height: auto; width: auto; display: block; max-height: 45px">
</a>';
}, 15 );Btw. do you know why hamburger menu dissapear on Samsung devices but only on contact page?
Best regards. Pawel
Hi Pawel,
The issue is caused by your custom CSS, specifically by this code:
@media (max-width: 800px) {
.site-branding .custom-logo {
max-width: 80%;
max-height: 82px;
}
}I suggest removing the .custom-logo part from it.
Please understand this is a theme modification and I can only provide tips for it as it is out of scope of the support service I provide. Please read terms of service.
Tip: Try using your web browser code inspector to determine the CSS for your theme modifications.
Regarding the hamburger menu on Contact page, I’ve replied to your other support ticket.
You might be interested…
Best regards,
Oliver Juhas
WebMan Design
Hello!
Have you noticed this support service is provided free of charge?
If you like the speed and accuracy of the resolutions, please consider supporting me with a donation. Thank you!
You must be logged in to reply to this ticket.