[Resolved] Struggling to achieve header icon positioning like this example

[Lewis]

Hey guys,

I’m trying to place some creative icons to a header section but I’m struggling to position them in the same way as the example below.

Specifically, the icons should move relative to the content container but they don’t seem to have any “anchor” at all. It’s clear my understanding of CSS and absolute positioning is lacking here and any assistance would be greatly appreciated.

Happy to elaborate if my question isn’t clear. Thanks.

[David]

Hi there,

if you select the parent Container Block that contains the container with your icons inside. And give it an Advanced > Additional CSS Class(es) of: relative

Then you can add this CSS:

.relative {
    position: relative;
}

This will make that container relatively positioned. Then those absolutely positioned icons will be positioned relative to that container.

[Lewis]

Hi David, thanks for your reply.

I’ve done as you instructed but it didn’t work, unfortunately.

Am I missing something?

Thank you again for your help and patience.

P.S. Changing the icons from absolute to relative gets me closer to what I need, but the icons on the right still aren’t anchored to the content container. Of course, the example website uses absolute so I’m probably way off here.

[Fernando]

Hi Lewis,

Can you try altering their top and left values?

Specifically, these ones:

.header-svg-1 {
	top: 20px;
	left: -15px;
}

.header-svg-2 {
	top: 0px;
	left: 990px;
}

.header-svg-3 {
	top: 0px;
	left: -15px;
}

.header-svg-4 {
	top: 0px;
	left: 1160px;
}

Let us know how it goes.

[Lewis]

Hi Fernando,

Changing those values does indeed change the icon positions, but I want them anchored to the content container like the example website provided.

If you open the example website and adjust the window width, you will see what I mean; the icons never move from their relative position.

[Fernando]

It’s the same thing I believe.

The main difference is that the other two SVG icons are positioned from the right.

For instance, to see what I mean, try replacing this:

.header-svg-4 {
	top: 0px;
	left: 1160px;
}

with this:

.header-svg-4 {
	top: 0px;
	right: 30px;
}

Afterward, try decreasing the screen size.

[Lewis]

Thanks Fernando,

After making the changes you suggested, the icon still doesn’t move with the content container.

That particular icon (svg-4), for example, should always be positioned in the top right corner of the sidebar, but it currently slides across the entire header depending on the window size.

Forgive me if it’s not clear what I’m trying to achieve. Please let me know if further clarification is needed.

[Fernando]

The only remaining this is to set a max-width.

Replace this:

.relative {
    position: relative;
}

with this:

.relative > .gb-inside-container{
    position: relative;
}

This allows the SVGs to anchor to the inner container which already has a max-width.

[Lewis]

It works! Thank you so much.

The only remaining issue I’m seeing is one of the icons (top right) still moves when making the window very narrow. I assume this is related to breakpoints.

Any idea why it’s only affecting this one icon?

[Fernando]

Yes, it will still move as it’s anchored to the right.

You can prevent this with an @media query.

Example:

@media (max-width: 768px) {

.header-svg-1 {
	top: 20px;
	left: -15px;
}

.header-svg-2 {
	top: 0px;
	left: 990px;
}

.header-svg-3 {
	top: 0px;
	right: 0px;
}

.header-svg-4 {
	top: 0px;
	right: 0;
}

}

Set a small right value for this media query.

[Lewis]

Hey Fernando,

Sorry for the late reply.

I have added your suggestion and it works on a very narrow window, however, there is still some icon movement before we get to max-width: 768px. Perhaps this isn’t strictly a breakpoint issue?

Thank you again for your patience with this.

[David]

For this icon try using a % value on desktop:

.header-svg-3 {
    top: -10px;
    right: 25%;
}

That way it will respond responsively when the screen reduces in width.

[Lewis]

That’s pretty close to perfect, thank you!

I’ll mark this as resolved.

You guys are the best.

[Fernando]

You’re welcome, Lewis! Feel free to reach out anytime you’ll need assistance with anything else.

[Author]

Posts