[MobilityParticipant]

Greetings! I would like to add a button right of the title on one page. I tried following this:

https://community.theme.co/forums/topic/add-button-or-other-content-to-title-area-ethos/

And it mostly works-hooray! The only thing I can’t figure out is how to get the button to stay aligned with the menu when the screen size changes. Any ideas?

[MobilityParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thanks for the link.
Please note that navigation menu is center aligned on it’s container. So every time the screen was resized, it will just adjust to display on it’s center. With this, we can’t really just guess where the end of it will be thus it will be tricky to make the end of the menu and the download button to be aligned vertically. The width of the main menu is different from the width of download button and text agenda, aligning them will be hard. I can see that you have thee following CSS:

@media (min-width: 768px){
.h-landmark > .x-btn {
    float: right;
    margin-left: 10px;
    margin-right: 140px;
    width: 30%;
    max-width: 20%;
}
}

This line:margin-right: 140px; determines the position of the button on the right part. We can add adjust that per screen size but that would not be 100% responsive. Try also adding this:

@media (min-width: 980px){
.h-landmark > .x-btn {
    margin-right: 146px;
}
}

Depending on the screensize you can adjust the value for margin right. Try also using percent value for responsiveness.

Hope this helps.

[MobilityParticipant]

This is very helpful. I will give it a try. Thank you!

[FriechModerator]

You’re welcome, should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[Author]

Posts