opgelost joomla/bootstrap menu probleem

Ik zou op mijn site naast of als onderdeel van het menu één menu item willen hebben die uit een icoontje bestaat in plaats van de gebruikelijke tekst.
Dat kan in Joomla, maar ik wil de menu knoppen allemaal een bepaalde breedte hebben 134px, en de knop met het icoontje de helft van de breedte van de andere knoppen. Ook zou ik een mouse over effect willen (dus icoontje veranderen) of als deze pagina actief is.. heel veel wensen dus !-)
Alleen kom ik er niet uit!

Template is gebaseerd op Bootstrap, joomla laatste versie.
Site www.didit-highend.com

Alle hulp is welkom!

Zo te zien ben je er bijna? Ik neem tenminste aan dat je als icon de winkelwagen al hebt geplaatst?

Voor :focus en :hover gebruik je dan een plaatje met de tekst erin. Voor :active kan je een 3e plaatje/icon gebruiken

Beste Anne, bedankt voor je reactie.
ja inderdaad bijna, maar niet zoals ik wil!
De knop zou net zo groot moeten zijn als het icoontje.
Ook lukt het mij niet om de marge tussen de gewone knop en de knop met icoontje goed te krijgen (dus ook 2px)..

Het menu bestaat nu uit 2 delen, het gewone menu en een shopmenu. Ik dacht dat praktisch was, omdat ik dan bij shopmenu een andere width van de knop kon definiëren. Maar ik krijg het niet voor elkaar...

Nee in je template.css op
Het zou makkelijker zijn als je het 2e menu in de module (Opties > Geavanceerd) een extra menu class achtervoegsel tevoegt, dus bijvoorbeeld " shop" (spatie+shop) dan kan je namelijk e.e.a. beter per CSS precies sturen.

Tip: maak gebruik van de Firebug-addon voor Firefox (links naar deze tool hier te vinden addons.mozilla.org/nl/firefox/addon/firebug/?src=search ). Met deze tool kun je o.a. van ieder onderdeel van de site de css definities achterhalen en waar en in welk bestand ze staan. Tevens kun je met deze tool in de betreffende pagina van je site veranderingen aanbrengen in de css definities en meteen zien wat het effect is (later evt. wel zelf de aanpassingen aanbrengen in css bestanden).

Fantastisch Anne!
Ik had al zitten rommelen met de class achtervoegsels, maar kwam er niet uit, had er niet aangedacht dat je ook per item de CSS kan specificeren! Nu wel dus. Super!
Nu alleen nog proberen het plaatje te veranderen bij mouse over en actief.
Ik laat deze nog even open staan als je het niet erg vindt, voor het geval de mouse over enzo niet werkt!

Hoi Anne,
een en ander is redelijk gelukt dankzij jou hulp.
Voor het gemak maar even opacity gebruikt in plaats van een ander plaatje laden.

Maar als het de cart actief is wilde ik zichtbaar in het menu (ook weer makkelijk met opacity) maar dat krijg ik (nog) niet voor elkaar..
Ik gebruik firebug inderdaad ook, alleen moet ik nog veel leren om een template te maken. Dit is mijn eerste poging. Eerst voornamelijk templates aangepast op kleur enzo.

het volgende heb ik opgenomen in de CSS.

Edit Jelle. Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

OK, zal er aan denken. Excuus daarvoor. Is inderdaad een stuk beter, bedankt!

Je moet even kijken naar de andere css. Je moet nog active ergens toevoegen voor het actieve menu-item.

Ja ik zag dat ik die er niet bij had gekopieerd, maar had hem wel in mijn CSS file gezet.
Maar om de een of andere reden (fout van mij waarschijnlijk) krijg ik hem niet werkend..
deze stond er ook bij:
Maar wil nog niet lukken! Wat doe ik verkeerd?

Persoonlijk zou ik het anders aanpakken. Vind de aanpak met menu-id goed voor een site die al staat en waar je even snel iets aan wilt passen, maar als je nu iets gaat veranderen en je menu-id verandert, dan klopt het niet meer.

Je menu heeft nu als suffix nav-pills, verander dat in nav-shop of zoiets. Kopieer dan alle css waar nav-pills in voorkomt en hernoem pills naar shop. Ik zou ze bij gecombineerde definities zoals deze bijvoorbeeld: wel even loshalen. Dus de definitie kopiëren en alleen er neer zetten.
Dan is je menu nog steeds hetzelfde, maar dan kan je veel eenvoudiger met firebug kijken wat er gebeurt.

Hey Astrid,
bedankt voor je advies. Ik had aanvankelijk een dergelijk idee in mijn hoofd, maar zag op tegen de enorme hoeveelheid CSS die dan omgezet moet worden..
Maar zal kijken of ik vanavond een begin kan maken.
Doe liever iets helemaal goed dan dat ik straks weer problemen krijg.
Voordeel van jou manier is dat als er meer items in het menu komen deze automatisch goed zouden moeten komen te staan.
De andere methode werkte wel goed overigens. Ga er straks aan beginnen!

Bedankt allemaal voor de aangeboden hulp!