![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
July 18, 2024 at 5:22 pm #1462412
Hi,
i’m trying to create a navigation with 3 clickable images next to each other.
Could not find a way to do it. What would be a practical way to archive this?Would it make sense to add 3 images next to each other and link them with html, would be the code?
kind regards
JakJuly 19, 2024 at 7:15 am #1462458Hey Jak73,
Thank you for the inquiry.
Yes, you may need to manually create this using html and a few css modifications. Please start with this html code in a text or code block element:
<div class="navigation"> <button class="nav-button left-arrow">←</button> <button class="nav-button close-button">×</button> <button class="nav-button right-arrow">→</button></div>
Then add this css code:
.navigation { display: flex; justify-content: center; align-items: center; } .nav-button { background-color: #fff; border: 1px solid #ccc; padding: 10px; margin: 0 5px; cursor: pointer; font-size: 16px; } .nav-button:hover { background-color: #f0f0f0; } .left-arrow, .right-arrow { font-size: 18px; } .close-button { font-size: 20px; }
Best regards,
IsmaelJuly 19, 2024 at 10:45 am #1462481Hi Ismael,
this is, what i was looking for, thank you!How can i add my own symbols in the buttons (please see private content) and how can i give them a specific size?.
Where should i put the links for navigation into the code?
kind regards
JakJuly 20, 2024 at 4:24 pm #1462556Hi,
Try this HTML:<div class="nav-container"> <div class="navigation"> <a href="#" class="nav-link left-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Left.svg" alt="Left"></a> <a href="#" class="nav-link close-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-X.svg" alt="close"></a> <a href="#" class="nav-link right-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Right.svg" alt="Right"></a> </div> </div>
and this css:
.nav-container { display: flex; justify-content: center; align-items: center; } .navigation { display: flex; justify-content: space-between; align-items: center; width: 300px; } .nav-button, .nav-link { display: inline-block; padding: 10px; text-align: center; text-decoration: none; border: 1px solid #ccc; border-radius: 5px; background-color: #f0f0f0; color: #333; } .nav-button:hover, .nav-link:hover { background-color: #e0e0e0; } .nav-link img { width: 20px; /* Adjust the size of the image icon */ height: 20px; }
For this result
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.