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 1 year 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 1 year 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 7 months ago

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

Viaan Viaan 6 months ago

I went through the code which you have shared here. But it was very hard to understand. Actually, I have only very few knowledge in this area and so I think I need more clarifications. how to get my printer online

Roland King 6 months ago

Wiechert Hooghwinkel

thanks a lot for your post! it was super helpful for me. also wanted to say thanks to everyone else who posted here as i found useful information.

was wondering if i can ask you questions privately or i should make a new thread? thanks

Sonny Annaguey 5 months ago

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

Gmail reset password | Google account recovery page

Trickytrap 2 months ago

Lots off people thing that I Interested about this website real fact is that I see the 4Liker Instagram or with this site Download Dragon City Mod Apk with loving topic is more .

Trickytrap 2 months ago

People who see the wonder content then he go to Teen Patti Gold Unlimited Coins ok you must read .

kham benh xa hoi 27 days ago

thank you!

WQatch GOlden GLobes 25 days 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