sailing123 Posted October 21, 2016 Share Posted October 21, 2016 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. Quote Link to comment Share on other sites More sharing options...
sailing123 Posted October 21, 2016 Author Share Posted October 21, 2016 Just stumbled upon this post on the foundation forum with the same question. There is one suggestion offered but it is looking above my capabilties and timing ... http://foundation.zurb.com/forum/posts/12484-horizontal-dropdown-menu-bar-stretching-width-of-page Quote Link to comment Share on other sites More sharing options...
sailing123 Posted October 25, 2016 Author Share Posted October 25, 2016 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 Quote Link to comment Share on other sites More sharing options...
bsandall Posted October 27, 2016 Share Posted October 27, 2016 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. Quote Link to comment Share on other sites More sharing options...
marka2326 Posted October 30, 2016 Share Posted October 30, 2016 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 Quote Link to comment Share on other sites More sharing options...
sailing123 Posted October 30, 2016 Author Share Posted October 30, 2016 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.