Joomla Templates Club 406,261 posts

[sp1der Friend sp1derJoin date: July 2014Posts: 24Downloads:0Uploads:3 Thanks: 8]

#199956

Hi,

In your Ja Magz demo has only display 3 menu items. In my case I have 6-7 menu with longer name.
It looks ok in desktop browser when there is enough width. When browse on smaller screen like tablet, the menu will resize like what I have shown in my attachment.

On mobile it will use Off-Canvas Navigation which will not face this issue.

How can I improve the menu layout? I had tried with hiding ‘.dropdown-toggle .caret’ but still the same issue.

Also, is there a simple custom css code to set only black menu background colour for phone screen (when Off-Canvas Navigation take effect) ?

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#543418

Hello Sp1dr
as if you have may menu items in the main menu then it will shifted the other items below as per the screenshot .
can you share your working site url, so that i can take a close look on this issue and the check the possibility to make it in a single line .
<blockquote>How can I improve the menu layout? I had tried with hiding ‘.dropdown-toggle .caret’ but still the same issue.
Also, is there a simple custom css code to set only black menu background colour for phone screen (when Off-Canvas Navigation take effect) ?</blockquote>

can you add a screenshot for this and illustrate your problem in it ,like this way its hard to assume the issue .
Please explain it a bit more with a screenshot so that we can assist you better

[sp1der Friend sp1derJoin date: July 2014Posts: 24Downloads:0Uploads:3 Thanks: 8]

#543469

Hi pankajsharma,

I have just took up my membership and working on a localhost at the moment.
In your JA Magz demo, there are only 3 menu items in mega menu. If you tried to setup 7-8 main menu items you should get the same problem (while view in tablet or change to enlarge the view to 140%) I have encountered as per screenshot.

As for hiding the ‘.dropdown-toggle .caret’ or other workaround tried, I was just exploring for workaround but I want to state this down to give you a better idea what else I had try out. If this confuse you, do ignore it.

In summary, Is there anyway to tweak mega menu to display more items without causing it to display in more than 1 line (refers to screenshot) on tablet. I am also using the default template width as well.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#543515

Hello Sp1dr
its obvious that , if you are using more menu item , then menu width , it will goes down in the next line .
As per your screenshot , you are using 7 menu with large text, so it will get menu bar a bit down because of large width of menu then container size .
You also have sidenav menu , as you can see in the demo to add more menus .
<blockquote>’.dropdown-toggle .caret'</blockquote> For this please explain a bit more with a screenshot what you want to achieve . 🙂

For adding more menu in the top menu bar , you need to remove the logo and search module .
and need to change the nav bar span size .
For this please make site live , so that we can check if there is possibility to add more menu items or not.

[Author]

Posts