Jump to content

Sub category horizontal menu to expand 100%


sailing123
 Share

Recommended Posts

Hi,

I am trying to improve the display function of the sub category of the top horizontal menu. Basically I have several sub categories and sub sub categories. When viewed on a desktop, it is really not user friendly as the foundation css is a cascade over the content page already full of images and text. See image below:

I think it would be best if the sub category section was 100% width to mask the content underneath. I have tried to play with the css top-bar-section with no luck.

Does anyone know which css attribute I should change ?

Many thanks

S.

 

menu-pic-for-cubecart-forum.jpg

Link to comment
Share on other sites

Still no taker ?

I stumpled upon this Cubecart website (https://www.kapray.com/) and it has a much improved top navigation menu with 2 sub category levels.

Would anyone know who has done the work as it is this level of layout I am after. I will also contact the owner of the website, they may tell me who has modified their menu.

Many thanks

S

Link to comment
Share on other sites

If you hover over the element you want to modify the CSS for and right-click, you should be able to select the 'Inspect Element' option from the menu and your browser will display a small window showing the HTML markup, CSS rules that apply, etc.

Doing that on a sub-category on the Foundation skin shows that the rule you wan to to modify is probably related to `.top-bar-section .dropdown`. The nice thing about using the inspector, though, is you can fiddle with the CSS right there in the browser in real time and see which rules do what you want.

Messing around with it some it seems that the float:left nature of the categories is at least partly responsible for their width not spanning the page, but it will probably take a fair amount of effort to figure out what exactly to change so that it still looks nice.

Link to comment
Share on other sites

Sailing123,

I like the kapray.com style as well.  I've been looking for a modern responsive skin and this a good find.  Just need to find the source.

I plan to keep searching for a V6 skin with this look and feel.  Will keep you posted if something more.  Please post any info you may find.

Thanks

Link to comment
Share on other sites

Thanks bsandall for your advice. I have already been "playing"  with the CSS of the drop down section, changing colour, etc but I have not managed to change successfully the width. Reading through Foundation forum, it does sound like it is not for amateurs but I will persist. I have been using Firefox inspector but have yet to see how I can amend live with it rather than changing my core files in cpanel.

Hi marka2326, I contacted the owner of the website. He modified the css himself but he is also using Cubecart 5 ... his menu required some jQuery and he suggested this link:

https://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/

In the meantime, I found this article (from that lead http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus) which I need to study and try to put into application: https://zurb.com/university/lessons/nav-components-part-1-design-advanced-navigation-with-mega-menus.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...