CODEWITHSUNDEEP
htmlcssjoomlamenuparent
JxM
JxM

Reputation: 45

Write slightly different CSS for Parent Menu Item

everybody!

Got into a bit of a trouble here.

So, basically, I badly want to make my Parent Menu Items in Joomla! main menu slightly different then other Menu Items. What I want to achieve is that the Parent Item would have ... let's say, a little triangle made with bg image on the right to show visitors there are some submenus included.

I've been trying to get my CSS working, but somehow nothing happenes and with inspecting the generated code and elements CSS hasn't applied anything to the Parent Items.

Here's the code:

<li class="item-101 current active"><a href="/" >Domov</a></li>
<li class="item-107"><a href="/index.php/o-meni" >O meni</a></li>
<li class="item-108 deeper parent"><a href="/index.php/psihoterapija" >Psihoterapija</a>
    <ul class="nav-child unstyled small">
        <li class="item-113"><a href="/index.php/psihoterapija/podmeni-1" >Podmeni 1</a></li>
    </ul>
</li>
<li class="item-109"><a href="/index.php/zdravstvena-psihoterapija" >Zdravstvena psihologija</a></li>
<li class="item-114 deeper parent"><a href="/index.php/ponudba" >Ponudba</a>
    <ul class="nav-child unstyled small">
        <li class="item-117"><a href="/index.php/ponudba/podmeni-2" >Podmeni 2</a></li>
        <li class="item-118"><a href="/index.php/ponudba/podmeni-3" >Podmeni 3</a></li>
        <li class="item-119"><a href="/index.php/ponudba/podmeni-4" >Podmeni 4</a></li>
    </ul>
</li>
<li class="item-139 deeper parent"><span class="nav-header">Ostalo</span>
    <ul class="nav-child unstyled small">
        <li class="item-138"><a href="/index.php/ostalo/aktualno" >Arhiv novic</a></li>
        <li class="item-116"><a href="/index.php/ostalo/povezave" >Povezave</a></li>
        <li class="item-115"><a href="/index.php/ostalo/kontakt" >Kontakt</a></li>
    </ul>
</li>

So, the items I want to change are those with .deeper.parent class.

The CSS code I wanted to apply but doesn't work:

#navigation .parent { padding:37px 22px 37px 8px !important; background-image: url(../images/more.png) !important; background-position: right !important; background-repeat: no-repeat !important; }

I also tried changing #navigation .parent to #navigation .deeper.parent and to #navigation li.item-108.deeper.parent as well. Nothing really works. Any ideas? Thanks!

Upvotes: 0

Views: 453

Answers (2)

Devin
Devin

Reputation: 7720

I'm assuming some coding here for display purposes, but what you want here is this part:

#navigation li.parent { padding:37px 22px 37px 8px !important; background:url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png)  no-repeat right center}

You can see fiddle and the adjust at will (REMEMBER: I'm assuming your code so you'll have to adjust it to your real code!)

Upvotes: 1

Lodder
Lodder

Reputation: 19733

Firstly, ensure you actually have the #navigation ID assigned to your <ul> like so:

<ul id="navigation">

Secondly, make sure you do not target menu items based on their item number, such as .item-108. These are assigned by Joomla and may change in the future.

Ok, so as you mentioned, you want to target menu items with the deeper and parent classes, for this, you can use the following:

.deeper.parent a {
    background: url(../images/more.png) no-repeat;
    background-position: right center;
    height: 12px;
}

Note that I have used right center to define the X and Y axis, and also defined the height of the image, which may be different for you.

Hope this helps

Upvotes: 0

Related Questions