How to create a horzintoal menu not using DJ-Menu

amsharma
Topic Author
Offline

2 years 10 months ago #9566 by amsharma

amsharma created the topic: How to create a horzintoal menu not using DJ-Menu

Hi,

I am trying to create a simple Horizontal menu without using DJ-Menu. I tried placing it at jm-top-menu-nav and top-bar-2 but it shows up vertically. I am using the latest Joomla 3.6.2 and jm-services template. Searched the forum and internet but didn't find any solutions. Any suggestions are appreciated.

Thanks
Amal

Please Log in or Create an account to join the conversation.

artur
Offline

2 years 10 months ago #9567 by artur

artur replied the topic: How to create a horzintoal menu not using DJ-Menu

Hello,
If you do not want to use DJ-Menu , you need to modify css styles for menus. There are no other ready to use horizontal menu in this template.

Regards.

Please Log in or Create an account to join the conversation.

amsharma
Topic Author
Offline

2 years 10 months ago #9568 by amsharma

amsharma replied the topic: How to create a horzintoal menu not using DJ-Menu

If you can kindly suggest the changes just to make it horizontal then I can do them. The changes to make this happen are probably few. If there are too many changes then we can skip it.

Thanks

Please Log in or Create an account to join the conversation.

artur
Offline

2 years 10 months ago #9569 by artur

artur replied the topic: How to create a horzintoal menu not using DJ-Menu

If only single level menus needed - Example :

#jm-allpage .nav.menu.horizontal-ms {
  margin: 0;
  > li {
    border: none;
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #444;
    padding-right: 20px;
    margin-right: 20px;
  }
  > li:last-child {
    border: none;
    padding: 0;
    margin: 0;
  }
  > li.parent:after {
    display: none;
  }
  li a,
  li span.separator {
    padding: 0;
    line-height: 1.4em;
    text-transform: uppercase;
  }
  ul {
    display: none;
  }
}

of course you need to add suffix 'horizontal-ms' to menu module.

Regards.

Please Log in or Create an account to join the conversation.

amsharma
Topic Author
Offline

2 years 10 months ago - 2 years 10 months ago #9570 by amsharma

amsharma replied the topic: How to create a horzintoal menu not using DJ-Menu

I am good with single level menu right now. I added the code to a new file custom.css in templates/jm-services/css directory. Specified horizontal-ms as the Menu Class Suffix but it hasn't made much difference. The menu style changed but its still vertical. I hope this is the right way. Pls pardon my ignorance.

I checked the firebug. It shows the following:

<ul class="nav menuhorizontal-ms">
<li class="item-101 default current active"><a href="/mywebsite/index.php">Home</a></li><li class="item-105"><a href="/mywebsite/index.php/about-us">About Us</a></li><li class="item-106"><a href="/mywebsite/index.php/products-services">Products &amp; Services</a></li><li class="item-107"><a href="/mywebsite/index.php/contact-us">Contact Us</a></li></ul>

I edited HTML in firebug and made the class <ul class="nav menu horizontal-ms"> (notice the space) which made it go back to exactly the way it was before any changes.

Last Edit: 2 years 10 months ago by amsharma.

Please Log in or Create an account to join the conversation.