Adding image between search bar and section name

Beantwortet

4 Kommentare

  • Ifra Saqlain
    Aktionen für Kommentare Permalink

    Anton,

    You mean this type?

     

    If yes then,

     

    Add image b/w breadcrumbs and searchbar and you can fix on mobile devices by CSS.

     

     <nav class="sub-nav">
    {{breadcrumbs}}

    <div> <img src="{{asset 'download.jpg'}}" /> </div>

    <div class="search-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false}}
    </div>
    </nav>

     

    Thank You

    Team

    1
  • Anton Van der meyden
    Aktionen für Kommentare Permalink

    Hello Ifra,

    Ifra Saqlain

    Thank you for your help.

    I have added the line of code to my section page as shown below.

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}

    <div> <img src="{{asset 'Disputes.png'}}" /> </div>    My asset is saved as a png 

    {{search submit=false}}
    </nav>

     

    This is not working. Can you please assist further?

    Thank you.

    Kind Regards,

    Anton

    0
  • Ifra Saqlain
    Aktionen für Kommentare Permalink

    Anton,

    If you do like this then you don't need to add image on every template. Here is your given HTML code and I I added background image by CSS. First thing is, add image in your HC's assets folder.

     

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
    </nav>


    <style>
    .sub-nav{
    background-image:url({{asset 'download.jpg'}});
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    }
    </style>

     

     

    Result:

     

     

    If any issue let me know :)

     

    Thank You

    Team

    1
  • Anton Van der meyden
    Aktionen für Kommentare Permalink

    Hello Ifra,

    Ifra Saqlain

    Thank you for your help.

    I will be able to get it to work from this.

     

    Kind Regards,

    Anton

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk