-
How to improve the spacing of the menu, making better use of the headspace?
Left a lot of space on the right and descriptions of each item in the menu fell in 2 rows, overlapping the menu text.
thanks
where increasing the spacing between menu items of SpaTreats theme, is it?
Hi.,
Just add this css code in Dashboard > Spa Treats > Integration > Custom Css and adjust the padding 20px as per your needs.
ul.menu li { padding: 0 20px 0 0; }thank you for giving a direction! 🙂 🙂 🙂
but greatly increases the spacing and was a hole between options because the text is a little larger than some menu items.
My solution was to copy all “ul.menu read” Header in version 3.5 to 3.6, and OK !!
The spacing between items only increases according longer the top text for each menu item.
/*—-*****—- << Header >> —-*****—-*/
#header { width:100%; float:left; padding:0px 0px 30px; }
#top-menu { float:left; width:100%; height:95px; z-index:9999; position:relative; }
ul.menu { float:left; width:95.8%; height:90px; padding:0px 9px 0px 30px; }
ul.menu li { display:inline; float:left; height:90px; padding:0px 20px 0px 0px; position:relative; }
ul.menu li a { font-weight:400; font-size:20px; text-transform:uppercase; padding:0px 0px 24px; float:left; }
ul.menu li a span { font:normal 12px “Lucida Sans Unicode”, “Lucida Grande”, sans-serif; text-transform:none; display:block; padding:22px 0px 0px; }
ul.menu li a:hover { text-decoration:none; }
ul.menu li:last-child { padding-right:0px; }
ul.menu ul { position:absolute; display:none; width:185px; padding:5px 0px; top:95px; left:0px; border-bottom:5px solid #967d4f; }
ul.menu li ul li { padding:0px; margin:0px; height:auto; border:none; padding:0px; }
ul.menu li ul li:hover { border:none; }
ul.menu li ul li a { width:165px; height:auto; float:left; line-height:24px; padding:5px 15px; margin:0px; font-size:14px; }
ul.menu li ul li ul { border-top:none; }
ul.menu ul ul { top:auto; }
ul.menu li ul ul { left:185px; margin:0px 0 0 0px; }
ul.menu li:hover ul ul, ul.menu li:hover ul ul ul, ul.menu li:hover ul ul ul ul { display:none; }
ul.menu li:hover ul, ul.menu li li:hover ul, ul.menu li li li:hover ul, ul.menu li li li li:hover ul { display:block; }
ul.menu li ul li.current_page_item { border:none; }
Hi.,
OK, Thank you.
Let us know, if you find any issues in future.
Hi!
Thanks 🙂 Let us know, if you find any issues in future..
You must be logged in to reply to this topic.
