Archived topic
How to add SVG Div and align to the top-right?
4 replies · Started by Sascha on December 15, 2021
Hey there
I need to place this "Made in Germany" SVG to the upper right corner.
I have created a block element of the type "hook" & "after_header" & prio 99.
Then created a container and the image-block containing the SVG and added the class "sticky-made-menu"
Then added CSS in Customizer:
/* Made in Germany menu item */
.sticky-made-menu {
position:fixed;
right:0%;
top:0%;
}
But it's not displayed.
This element should appear in the upper right corner, like on this mockup.
Can you please help me achieving this?
Please find credentials below.
PS: Why is the SVG shown in Image Block, but not as Container-Background?
Hi Sascha,
I don't see the element in HTML, have you assigned a location to the element?
PS: Why is the SVG shown in Image Block, but not as Container-Background?
It should show as a background image of a container block.
I have tried several options and got lost. Can you help me please this element to appear in the upper right corner, like on this mockup?
It's not working as image block, nor as background in container.
The element is created under the name "Made in Germany NEW SVG" and set to display on "Entired Site". All other options that may be relevant you find in my initial post. Also, you find the credentials of the site in the private information of my initial post.
Please help 🙏🙏🙏
Hi there,
Is this only on Desktop ?
If so ... maybe a better solution would be to add the <img> to a Menu Item.
If you add a new custom link to the Menu, and in the Navigation label, add your <img> HTML.
And add a CSS Class to the menu item eg.made-in-germany :
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/
Then we can use some CSS to style it.
But at least by default it will be part of the navigation so no need to mess around with strange positioning
