Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 18, 2024 at 5:22 pm #1462412
    Jak73

    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
    Jak

    July 19, 2024 at 7:15 am #1462458
    Ismael

    Hey 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">&larr;</button>
    <button class="nav-button close-button">×</button>
    <button class="nav-button right-arrow">&rarr;</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,
    Ismael

    July 19, 2024 at 10:45 am #1462481
    Jak73

    Hi 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
    Jak

    July 20, 2024 at 4:24 pm #1462556
    Mike

    Hi,
    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
    Enfold Support 6350

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.