- This topic has 19 replies, 2 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
March 4, 2020 at 5:17 am #1184597Igor
Good afternoon.
On the desktop, I set the background image of the header. How do I set a different background image on mobile? I don’t know how to write CSS myself, and I don’t know where to paste it?2) Write me CSS to adjust the captions of the mobile header, regardless of the logo.
Forgive me, I don’t know English, this is a translation from Google.
March 4, 2020 at 7:33 am #1184879DavidStaffCustomer SupportHi there,
1. try this CSS:
@media (max-width: 768px) { .site-header { background-image: url('full_url_to_your_mobile_image/image.jpg'); } }
Make sure you change the image URL
2. Do you mean the Site Title and Tag Line ? And if so – how do you want to adjust them ?
March 4, 2020 at 9:28 am #1185005Igor1). I pasted the code into the ‘Simple Custom CSS’ plugin. Everything works. Thank you.
2) Site name and Site description in a mobile header. So that they can be moved right, left, up and down, regardless of the logo.
March 4, 2020 at 9:32 am #1185007DavidStaffCustomer Support2. Where do you want them positioned exactly ? As this will take some CSS
March 4, 2020 at 9:32 am #1185008DavidStaffCustomer Support2. Where do you want them positioned exactly ? As this will take some CSS
March 4, 2020 at 9:57 am #1185048IgorLeft, closer to the logo.
Now in the mobile header the position of the Logo, Name and Description of the site are changing together. Is it possible to make the logo position in the mobile header be changed separately. And the position of the Name and Description of the site should be changed separately.March 4, 2020 at 5:10 pm #1185330DavidStaffCustomer SupportThe logo and the site branding ( title and tag line ) both sit in the same container. So we can move them around each other.
For example try this CSS to reduce the space between the Logo and the text:
@media(max-width: 768px) { .site-branding-container .site-logo { margin-right: 0.25em; } }
March 4, 2020 at 9:45 pm #1185431IgorWorks. But it does not work out what is needed.
I did everything in one file. How now to disable the logo and site names in the mobile version?March 5, 2020 at 5:35 am #1185725IgorMarch 5, 2020 at 5:37 am #1185727DavidStaffCustomer SupportAdd this CSS:
@media (max-width: 768px) { .site-branding-container { visibility: hidden; } }
March 5, 2020 at 5:56 am #1185743IgorEverything worked out.
David, Thank you very much.March 5, 2020 at 6:06 am #1185759DavidStaffCustomer SupportYou’re welcome
March 5, 2020 at 6:38 am #1185794IgorSorry, another question: How to attach a home link to the background image of the mobile version?
March 5, 2020 at 12:06 pm #1186303DavidStaffCustomer SupportHow about we do this instead.
1. Customizer > Layout > Header – enable Mobile header.
2. Then create a new Hook Element to add the header image and link in:2.1 add this content
<div class="site-logo mobile-site-logo hide-on-desktop hide-on-tablet"> <a href="https://www.paraklit.org/" title="Христианская Церковь" rel="home"> <img class="header-image" alt="Христианская Церковь" src="https://www.paraklit.org/wp-content/uploads/header1.jpg" title="Христианская Церковь"> </a> </div>
2.2 Select the
after_header
hook
https://docs.generatepress.com/article/hooks-element-overview/March 5, 2020 at 7:02 pm #1186549IgorDid as you wrote. Everything worked out.
But only the problem:
-
AuthorPosts
- You must be logged in to reply to this topic.