sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi, you can set that in the Custom Menu. Go to Appearance > Menu and select your social menu to edit it. If you click and open one of the social menu items, under Title Attributes you will see a check box to have the menu item open in a new window/tab. If the Title Attributes section isn’t there, click on Screen Options at upper right and under Advanced menu properties, check Title Attribute.
Are you talking about this site: http://www.opvoedempowerment.nl/ ? It appears to be in Maintenence Mode right now so I can’t look at it to see how you have things set up and also check it on my phone. Why the header is not showing on mobile is difficult to diagnose if we can’t see the site.
Ahhh thanks for taking the time for answering.
Sorry you couldnt reach my website.
Ive put it online. Hope you can find some time again to check it out.
With the header I mean the picture I have uo now.
Hi there,
Thank you for sharing the link to your site!
Your header image is being hidden on devices that are less than 600px in width due to the following CSS:
@media screen and (min-width: 600px) {
.site-branding {
background: #fff;
background-position: center;
background-repeat: no-repeat;
text-align: center;
height: 100%;
min-height: 72px;
padding: 3em 0 36px;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
In the theme’s original style.css file the above snippet does not have the following media query wrapped around it:
@media screen and (min-width: 600px) {
}
The query is telling the theme to only apply those CSS rules for devices that are 600px in width or more. The rules need to be applied in order for your header to remain visible.
Did you add that media query in your custom CSS or edit the theme’s files directly? If so, please remove it in order to get your header image to display across all devices.
The snippet should then look as follows:
.site-branding {
background: #fff;
background-position: center;
background-repeat: no-repeat;
text-align: center;
height: 100%;
min-height: 72px;
padding: 3em 0 36px;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you can let me know what you were hoping to achieve by adding the media query in the first place, I’ll see how I can help.
@sacredpath thank you very much. The social media icons are now opening in a new window.
Thank you!
@siobhan, ahh thank you. Now that I’ve removed the code I think I know why I put it in.
The header is not responsive, it only shows a small part. Do you know how I can make the header responsive so that on mobile devices you can see the text written on it, instead of just a part of it.
@opvoedempowerment: Since Sela is designed for a large custom header, which is used as a background image, edges of the image may indeed get cropped on smaller screen sizes. Custom headers that work best in this type of theme are more flexible, decorative or abstract, so they can handle some sort of cropping.
Instead of using that image as a custom header, I recommend uploading it as a logo via Appearance > Customize > Site Title, Tagline, and Logo. By default, any image uploaded as the site’s logo (which is separate to the custom header) will be resized on different devices, without any cropping.
Give that a go and let us know how you get on.
