-
Hi,
In my site I use a code_snippet in a widget in the header. The png logo in the header apparently is in the way.
I’d like to adjust the position of the date and/or maybe “bring it to the front”.
Also I’d like to put the date below the logo for mobile.Would it maybe help to a) make the png transparent or b) replace the png with a svg?
Kind regards, Leon
-
Hi there,
try this CSS:
@media(min-width: 831px) { .header-widget aside { position: absolute; right: 20px; } }On the larger screen it will absolute position the widget inside the header widget.
Doing so means it will take up no logical space in the header, allowing it to sit over the logo.For mobile position try this:
@media(max-width: 830px) { .inside-header { flex-direction: column; align-items: flex-end; } #masthead .header-widget { margin: 0; text-align: right; } } -
Thanks David,
That worked. I found flex-start to move the date to the left in mobile. How can I make it move 10 or 20 px higher?And, if possible, I’d like use another (more readable) version of the header, for mobile only as well.
I can of course make that another topic if you prefer.Kind regards, Leon
-
You could do something like this:
@media (max-width: 830px) { .header-widget aside { pointer-events: none; position: absolute; bottom: 4px; z-index: 1; } }But what changes do you want to make the mobile header ? we can address that here as we may need to adjust the above depending on whats required.
-
Sorry, I wasn’t clear. I want to use the attached png file for mobile. This way it will be more readable.
I tried to use your code, but I was not sure if it had to be added or replace something: I have now (thanks to you guys:
/* locatie datum in header desktop */
@media(min-width: 831px) {
.header-widget aside {
position: absolute;
top: 150px;
right: 0px;
}
}
/* locatie datum in header mobiel */@media(max-width: 830px) {
.inside-header {
flex-direction: column;
align-items: flex-start;
}
#masthead .header-widget {
margin: 0;
text-align: left;
}
}What should the new code replace?
Thanks, Leon
-
And will you still want to keep the date below it on mobile ?
Just considering the options for adding the different logo -
Yes. On mobile I’d like to replace the logo. I originally hoped that was maybe possible using Mobile Header in customizer > lay-out.
But I’m afraid I have now cluttered the css question about replacing or adding code in the second paragraph.
Kind regards, Leon
-
Your header looks like this on mobile:https://app.screencast.com/fYO4ttTZrr87X
The date is below the logo, is your issue now to switch the logo on mobile?
If so, you can add an image block to the header widget area, and add these CSS classes to the image block:
header-image is-logo-image hide-on-desktop hide-on-tablet, please check below screenshot as reference:
https://app.screencast.com/IbndamgTU146ZAnd then add this CSS:
@media(max-width: 768px) { .site-logo { display:none; } } -
Hi Ying,
It almost works for mobile, but now the date is on top of the header, and moved to the right.On tablet and desktop the original header images didn’t hide.
This is the css I have now:
/* aanpassing marge links voor tablet door generatepress helpdesk nieuw */
@media (max-width:1130px) and (min-width: 769px) {
.site-content {
padding-left: 20px;
padding-right: 20px
}
}
/* hiermee is ook het featured article in tablet view 2 kolommen door generatepress helpdesk nieuw */.generate-columns-container .featured-column {
float: none;
width: 100%;
}/* ruimte onder lees meer
nieuw */.masonry-load-more {
padding-bottom: 20px;
}
/* locatie datum in header desktop */@media(min-width: 831px) {
.header-widget aside {
position: absolute;
top: 150px;
right: 0px;
}
}
/* locatie datum in header mobiel */@media(max-width: 830px) {
.inside-header {
flex-direction: column;
align-items: flex-start;
}
#masthead .header-widget {
margin: 0;
text-align: right;
}
}>@media(max-width: 768px) {
.site-logo {
display:none;
}Mobile
Tablet
Desktop
-
On tablet and desktop the original header images didn’t hide.
i don’t see the classes being added to the image block.
but now the date is on top of the header, and moved to the right.
Move the date headline to below the image in the widget area.
-
If I try to add the classes, I get an error (sorry, it’s in Dutch) about the json reaction.
The date is below the header again now, but still aligned right. Earlier I fixed that with flex-start, but that css is now overruled, maybe?
@media(max-width: 830px) {
.inside-header {
flex-direction: column;
align-items: flex-start;
} -
Add this CSS:
@media(min-width:831px){ aside#block-65 { display: none; } }And change 768 to 830 in this CSS:
@media(max-width: 768px) { .site-logo { display:none; } } -
Thanks again. Unfortunately it didn’t completely solve the issues.
On both tablet and desktop both logo’s appear in the header – I’d like to use the alternative one only on mobile.
On mobile the header is fine now, the date however is now aligned right (in spite of “align-items: flex-start;”)
On tablet the date is positioned to the right as well, while in desktop the date seems to be totally gone.I still cannot add classes to the mobile header-widget because of the “error for non-valid json-reaction”.
Below all extra css that is involved.
Thanks, Leon
/* locatie datum in header desktop */
@media(min-width: 831px) {
.header-widget aside {
position: absolute;
top: 150px;
right: 0px;
}
}
/* locatie datum in header mobiel */@media(max-width: 830px) {
.inside-header {
flex-direction: column;
align-items: flex-start;
}
#masthead .header-widget {
margin: 0;
text-align: right;
}
}@media(max-width: 768px) {
.site-logo {
display: none;
}
}Mobile
Tablet
Desktop
-
Can you remove this CSS:
/* locatie datum in header desktop */ @media(min-width: 831px) { .header-widget aside { position: absolute; top: 150px; right: 0px; } } /* locatie datum in header mobiel */ @media(max-width: 830px) { .inside-header { flex-direction: column; align-items: flex-start; } #masthead .header-widget { margin: 0; text-align: right; } } @media(max-width: 768px) { .site-logo { display: none; } }And use this:
/* Position the date on desktop */ .header-widget aside:nth-of-type(2) { position: absolute; right: 20px;; } /* remove widget logo on large screen */ @media(min-width: 831px) { .header-widget aside:nth-of-type(1) { display: none; } } /* remove logo on mobile and position date */ @media(max-width: 830px) { .site-logo { display: none; } .header-widget aside:nth-of-type(2) { inset: initial; bottom: 6px; } } -
Thanks David,
I changed your code a little bit, as the mobile logo was supposed to be used only for mobile. The headers and the date are now almost right.
Two more questions remain:A. I’d like to have less space above the mobile logo, and a little bit more below it, for the date.
B. I’d like to add some space to the left and right of the logo on the tablet. In the earlier version of the site, your helpdesk gave me this (still active now):
/* aanpassing marge links voor tablet door generatepress helpdesk nieuw */
@media (max-width:1130px) and (min-width: 769px) {
.site-content {
padding-left: 20px;
padding-right: 20px
}
}Kind regards,
LeonMobile
Tablet
-
1. The space before the mobile logo comes from the widget spacing, you can set that space with this CSS:
@media (max-width:768px) { header.site-header .header-widget { margin-top: 10px; } }2. For the tablet, this CSS:
@media (max-width:1130px) and (min-width: 769px) { .site-content { padding-left: 20px; padding-right: 20px; } }change to:
@media (max-width:1130px) and (min-width: 769px) { .site-content, .site-header .inside-header { padding-left: 20px; padding-right: 20px; } }This will add the padding to the site header too.
- You must be logged in to reply to this topic.