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 almost 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 almost 2 years ago

Thanks Val,

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

 

 

Ana Jones over 1 year ago

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

Diwakar 10 months ago

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

Sonny Annaguey 8 months 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 4 months ago

thank you!

WQatch GOlden GLobes 4 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