- Posts: 9
How to create a horzintoal menu not using DJ-Menu
3 years 2 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
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.
3 years 2 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.
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.
3 years 2 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
Thanks
Please Log in or Create an account to join the conversation.
3 years 2 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 :
of course you need to add suffix 'horizontal-ms' to menu module.
Regards.
#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.
3 years 2 months ago - 3 years 2 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:
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.
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 & 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: 3 years 2 months ago by amsharma.
Please Log in or Create an account to join the conversation.
3 years 2 months ago #9573
by artur
artur replied the topic: How to create a horzintoal menu not using DJ-Menu
Hello,\
It is hard ot say where is the problem without access to code.
Please send site URL.
Regards.
It is hard ot say where is the problem without access to code.
Please send site URL.
Regards.
Please Log in or Create an account to join the conversation.
Time to create page: 0.223 seconds
