flippers Posted November 1, 2013 Share Posted November 1, 2013 (edited) Good evening. I'm trying to change, without success, the Top horizontal menu so it remains in only one row regardless the number of categories. That is, I want it to adapt the text to a fixed cell width instead of the other way around (the actual behaviour). Because I have a lot of categories and the Top horizontal menu increases the number of rows to show them all. I would be very grateful if somebody helps me with this. I'm using the default theme in version 1.5.6.0. Best regards. Edited November 15, 2013 by vekia (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted November 2, 2013 Share Posted November 2, 2013 this is what you're looking for? http://www.prestashop.com/forums/topic/286053-multiple-columns-in-drop-down-menu Link to comment Share on other sites More sharing options...
flippers Posted November 4, 2013 Author Share Posted November 4, 2013 Good morning. Thank you for your help, but that's not what I was looking for. In the attached image you can see what's happening with my menu. I want all the categories to be in the same row, but I can't make the text adapt to the cell to make space to others so it can be that way. Link to comment Share on other sites More sharing options...
HiPresta Posted November 4, 2013 Share Posted November 4, 2013 Good morning. Thank you for your help, but that's not what I was looking for. In the attached image you can see what's happening with my menu. I want all the categories to be in the same row, but I can't make the text adapt to the cell to make space to others so it can be that way. homepage.png you can make less space between menu items, but anyway you can't display them in one row, because you have lot of items, so there will not be space Link to comment Share on other sites More sharing options...
vekia Posted November 4, 2013 Share Posted November 4, 2013 it will be much easier for us if you will share url to your website Link to comment Share on other sites More sharing options...
karthiiiiiiiiiik Posted November 7, 2013 Share Posted November 7, 2013 hi flippers , you can also try this css ... /*** ESSENTIAL STYLES ***/ .sf-contener { clear: both; } .sf-right { margin-right: 14px; float: right; width: 7px; } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { margin: 10px 0; padding:0; width:980px;/* 980 */ background: #383838; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; color:#fff; text-shadow:0 1px 0 #333; } .sf-menu li:hover ul { left: 10px; } .sf-menu li.sfHover ul { left : 0px; top: 34px; /* match top ul list item height */ z-index:99; width:800px; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { position:inline; left : 0px; top: 34px; /* match top ul list item height */ z-index:99; width:200px; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 200px; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; } .sf-menu a { display:block; margin-right:2px; padding: 0 22px 0 20px; line-height:35px; border: 0; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #fff; white-space:nowrap; } .sf-menu li li { background:#333 ; } .sf-menu li li li { background:#333 ; } .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #4E4E4E; } .sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active { background: #4e4e4e; outline: 0; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: 10px; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: 11px; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('../img/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-bottom-left-radius: 17px; -moz-border-top-right-radius: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } li.sf-search { background: inherit; float: right; line-height: 25px; } li.sf-search input { -moz-border-radius: 0 5px 5px 0; padding: 3px 0; padding-left: 20px; margin: 6px 6px 0 0; background: #fff url('../img/search.gif') no-repeat left center; border:1px solid #777 } /* hack IE7 */ .sf-menu a, .sf-menu a:visited {height:34px !IE;} .sf-menu li li { width:200px; background:#726f72 !IE; } Link to comment Share on other sites More sharing options...
vekia Posted November 7, 2013 Share Posted November 7, 2013 checked on my own, works well thanks karthik Link to comment Share on other sites More sharing options...
karthiiiiiiiiiik Posted November 7, 2013 Share Posted November 7, 2013 hi vekia , I want to know how to create the floating hooks in prestashop ? ex facebook and twitter links with images Link to comment Share on other sites More sharing options...
flippers Posted November 15, 2013 Author Share Posted November 15, 2013 (edited) That .css didn't do what I was looking for. At least at my 13.3'' laptop... I added a main category and used the multiple columns drop-down-menu suggested by vekia. Thanks to you all! I think this topic can be marked as solved. Edited November 15, 2013 by flippers (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted November 15, 2013 Share Posted November 15, 2013 thank you for confirmation. i marked topic as solved exactly as you suggested with regards, Milos Link to comment Share on other sites More sharing options...
sidro Posted January 5, 2014 Share Posted January 5, 2014 (edited) . Edited January 5, 2014 by sidro (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted January 6, 2014 Share Posted January 6, 2014 why just dot? Link to comment Share on other sites More sharing options...
Chin88 Posted August 10, 2015 Share Posted August 10, 2015 Prestashop 1.6.0.14 Top horizontal menu v2.2.2 Jaro Theme Hello guys, How can I reduce the space between menu items to look more like the second screenshot? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now