1

In magento1.9.2.4 I want to display the menu like this: enter image description here

My styles for this menu is below:

    .nav-primary {
    position: absolute;
    display: block;
    margin-top: -85px;
}
.nav-primary li.level0, .nav-primary a.level0 {
    display: inline-block;
}
.nav-primary li {
    position: relative;
}
.nav-primary li.level0 > a {
    color: #70583a;
    margin-top: -5px;
    padding-top: 5px;
    font-family: trebuchet MS;
    font-size: 15px;
}
.nav-primary a {
    position: relative;
    display: block;
    line-height: 30px;
}
.nav-primary li.level0 ul {
    position: absolute;
    display: none;
}
.nav-primary li.level1 {
    padding: 10px;
    float: left;
    font-size: 15px;
    border-right: 1px solid #eae4da;
}
.nav-primary li.level0 li.parent > a {
    position: relative;
}
.nav-primary li.level1 ul {
    display: block;
    position: relative;
}
.nav-primary li.level0 ul {
    position: absolute;
    left: 0;
    z-index: 10;
    display: none;
}
.nav-primary li.level0 li.parent > a {
    position: relative;
}
.nav-primary .menu-active > ul.level0 {
    width: 655px;
    max-width: 740px;
}
.nav-primary .menu-active > ul.level0, .nav-primary li.level0 li.sub-menu-active > ul {
    display: block;
}

Here I have fixed the width like

.nav-primary .menu-active > ul.level0{
    width:655px;                                         
    max-width:740px;                

}

When I remove the width for this element the menu is like this:

enter image description here

I want to have dynamic width which will adjust according to the menu added instead of fixing it manually.I think there is a problem with positioning. Help me to resolve this issue please.

1

I found a way. It is not positioning issue. I just gave the below jquery in topmenu.phtml :

<script>
jQuery(document).ready(function() {

    jQuery('.level0 ul.level0').each(function() {
        jQuery(this).width(parseInt(jQuery(this).children().length * 185, 10) + 'px');
    });
});
</script>

Now the width is set dynamically.

This answer may help someone like me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.