Creating a new menu style

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Nachlawi
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Sep 25, 2017 10:44 am

Creating a new menu style

Postby Nachlawi » Mon Sep 25, 2017 11:52 am

Hi all,

First time poster here and also quite new to Joomla, so hi :)
I've been struggling to find out how to create my own menu module that will display in a specific format. The format needs to be in accordance to guidelines that I've received and based on pre-existing CSS files that I do not control.

This is the plain HTML of the menu bar:

Code: Select all

<div class="sitenav-menu-container sansfix">
  <div class="sitenav-menu-name"><a href="#">Site Title</a></div>
  <div class="sitenav-menu-list">
    <ul role="menubar" class="dynamic-content" data-type="content" data-file="/navs/menu-nav.html">
      <li role="presentation"><a role="menuitem" href="#">Item #1</a></li>
      <li role="presentation"><a role="menuitem" href="#">item #2</a></li>
      <li role="presentation"><a role="menuitem" href="#">item #3</a></li>
      <li role="presentation"><a role="menuitem" href="#">item #4</a></li>
    </ul>
  </div>
</div>


I have already created a Menu with some test menu items. It has been placed in the position that I want it to be in and it looks like this when I view source:

Code: Select all

<ul class="nav menu">
  <li class="item-108"><a href="/testsite/index.php/item1" >Item1</a></li>
  <li class="item-108"><a href="/testsite/index.php/item2" >Item2</a></li>
</ul>


In effect my question is: how can I edit the outcome as it is currently, to look like it should do in the first code snippet?

Thanks in advance!

User avatar
john-doe
Joomla! Explorer
Joomla! Explorer
Posts: 383
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia

Re: Creating a new menu style

Postby john-doe » Mon Sep 25, 2017 4:27 pm

Hello. Have you tried to do a Menu Override?

First you have to go to Templates and select Templates, then choose your template and look withing the files section. Then you have a tab called Create Overrides. You need to seek "mod_menu".

As soon as it gets created you need to go back to the files' list and seek html/mod_menu/default.php and start edit it. If you need to change the settings ONLY for the main menu rememmber to pick the default.php and choose the rename file button. Once renamed you can work on it.

After you have made the changes go to modules/(your main menu). Then choose the Advanced Tab and look for Layout and choose your recently edited file.

This should do to override the Menu Layout.
Hope this works for you.
www.aldemar-hernandez.com - Custom templates and design services.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 23558
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Creating a new menu style

Postby Per Yngve Berg » Mon Sep 25, 2017 5:43 pm


Nachlawi
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Sep 25, 2017 10:44 am

Re: Creating a new menu style

Postby Nachlawi » Tue Sep 26, 2017 8:59 am

Fantastic, thank you both!


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 12 guests