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

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

Taylor Shaw 5 months ago

The answers shared here gave me a better idea regarding how to Add a logo / icon to accordion title-bar. I have been wondering about the same for quite a while now. Thanks for sharing the question here. Do share more such relevant questions.  real estate photo editing services

Diwakar 5 months ago

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

ritariya 4 months ago

 

I was constantly searching for how to add logo or icon to the accordion title bar. Accidentally I have seen the post and I could find the techniques regarding to my search. I would like to add icon on the top of the accordion title bar. It’s nice to see the post. CCCHC 

Viaan Viaan 4 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 4 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 3 months ago

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

Gmail reset password | Google account recovery page

hp online care 9 days ago

HP Printer Support Online

Welcome to HP Printer Support Online for instant help and printer services. HP Online Care is one and only online support provider for hp devices. Let HP fix your devices online. Our certified technicain are available 24x7 for help and support. You are just a call away from our support team. Any hp product which is under warranty will be fixed Free of Cost without any charges online remotely.

Trickytrap 7 days 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 7 days ago

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