Menu icon Foundation
Add a logo / icon to accordion title-bar

Hi, I would like to add a logo or icon(svg) into or on top of the Accordion title bar. What would be the best way to achieve that?

<li class="accordion-item" data-accordion-item>
      	<a href="#" class="accordion-title my_accordion"><img class="on-top-logo" src="/Resources/Public/Css/nieuw.svg"></img>
        	<h4>A title here</h4>
	    </a>

css:

.on-top-logo{
    position: relative;
    z-index: 1000;
    display: inline-block;
    max-width: 3rem;
    height:auto;
    position: relative;
    vertical-align: middle;
    width: 100%;       
}

This is not getting in the right place. It its going above the title and widens the title-bar hight!

accordion

Hi, I would like to add a logo or icon(svg) into or on top of the Accordion title bar. What would be the best way to achieve that?

<li class="accordion-item" data-accordion-item>
      	<a href="#" class="accordion-title my_accordion"><img class="on-top-logo" src="/Resources/Public/Css/nieuw.svg"></img>
        	<h4>A title here</h4>
	    </a>

css:

.on-top-logo{
    position: relative;
    z-index: 1000;
    display: inline-block;
    max-width: 3rem;
    height:auto;
    position: relative;
    vertical-align: middle;
    width: 100%;       
}

This is not getting in the right place. It its going above the title and widens the title-bar hight!

Val Ery over 2 years ago

Hi Wiechert!

For you code, add css rule h4 {display: inline;} Then the title will be after a logo

More advanced option - add to li-element a rule li {position: relative;}. Then you can add a absolutely position for any element inside li.

Wiechert Hooghwinkel over 2 years ago

Thanks Val,

I will give it a try and see how this works out :) Show the result later-on.

 

 

Ana Jones about 2 years ago

Useful www.buyinstfollowers.com and helpful for knowing. I will try next time.

Diwakar over 1 year ago

Hey, I want to insert logo in the header like this website, how can I do in Zurb?

Sonny Annaguey about 1 year ago

Hmm, The shared information is really helpful for each one, thanks for all your inputs.

Gmail reset password | Google account recovery page

kham benh xa hoi 11 months ago

thank you!

WQatch GOlden GLobes 11 months ago

Thursday, December 6, 2018 Wednesday, November 21, 2018 Nominations for the honors will be introduced on Dec. 6 of this calendar year, using the dwell service being televised a month after on Jan. 6, 20-19, the company claimed. stream golden globes