ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   yozz84
   Member

   I would like to have this menu: http://codepen.io/anon/pen/bdmFz in thematic theme menu (sf-menu)... but i cant styling this... its not working as should... could someone help me with this? how should it look like? thank you very much.

   Posted 2 years ago #
2. 

   yozz84
   Member

   Now i have this:

   .skip-link {
       display:none;
   	background: #6EAF8D;
     background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
     background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
     background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
     background: linear-gradient(left, white 50%, #6EAF8D 50%);
     background-size: 50px 25%;;
     padding: 2px;
     display: block;
     height: 2px;
     overflow: hidden;
     width: 936px;
     margin: 0 auto;
   }
   
   #access {
   	font-family: helvetica, arial, serif;
       font-size: 10px;
   	text-transform: uppercase;
   	text-align: center;
   	overflow: visible;
   	z-index: 100;
   
   }
   
   .menu a {
     text-decoration: none;
     color: #fff;
     display: block;
   }
   
   .menu ul {
     list-style: none;
     position: relative;
     text-align: left;
   }
   
   .menu li {
     float: left;
   }
   
   /* clear'n floats */
   .menu ul:after {
     clear: both;
   }
   
   .menu ul:before,
   .menu ul:after {
       content: " ";
       display: table;
   }
   
   /* main ul element */
   .menu {
     position: relative;
     background: #2B2B2B;
     background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
     background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
     background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
     background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
     text-align: center;
     letter-spacing: 1px;
     text-shadow: 1px 1px 1px #000;
     -webkit-box-shadow: 2px 2px 3px #888;
     -moz-box-shadow: 2px 2px 3px #888;
     box-shadow: 2px 2px 3px #888;
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
   }
   
   /* sf-menu */
   ul.sf-menu li a {
     display: block;
     padding: 10px 15px;
     border-right: 1px solid #3D3D3D;
   }
   
   ul.sf-menu li:last-child a {
     border-right: none;
   }
   
   ul.sf-menu li a:hover {
   
     color: #000;
   }
   
   /* subs */
   ul.sub-menu {
     position: absolute;
     z-index: 200;
     box-shadow: 2px 2px 0 #BEBEBE;
     width: 35%;
     display:none;
   }
   
   ul.sub-menu li {
     float: none;
     margin: 0;
   }
   
   ul.sub-menu li a {
     border-bottom: 1px dotted #ccc;
     border-right: none;
     color: #000;
     padding: 10px 15px;
   }
   
   ul.sub-menu li:last-child a {
     border-bottom: none;
   }
   
   ul.sub-menu li a:hover {
     color: #000;
     background: #eeeeee;
   }
   
   /* sub-menu display*/
   ul.sf-menu li:hover ul {
     display: block;
     background: #fff;
   }
   
   /* keeps the tab background white */
   ul.sf-menu li:hover a {
     background: #fff;
     color: #666;
     text-shadow: none;
   }
   
   ul.sf-menu ul li:hover > a{
     color: #000;
     background: #f8f8f8;
   } 
   
   /* subs 2nd level */
   ul.sub-menu ul {
     position: absolute;
     z-index: 300;
     box-shadow: 2px 2px 0 #BEBEBE;
     width: 35%;
     display:block;
     float: left;
   }
   
   ul.sub-menu ul li{
     float: none;
     margin: 0;
   }
   
   ul.sub-menu ul li a {
     border-bottom: 1px dotted #ccc;
     border-right: none;
     color: #000;
     padding: 10px 15px;
   }
   
   ul.sub-menu ul li:last-child a {
     border-bottom: none;
   }
   
   ul.sub-menu ul li a:hover {
     color: #fff;
     background: #666;
   }

   Problems:
   - style second sub menu - 2nd level
   - i dont know how to put/style color decor line under menu [Done]
   - left and right side of menu dont heighlight when mouse is over like in example page

   Posted 2 years ago #
3. 

   em hr
   Moderator

   Please read this and come to then new ThematicTheme Forums for support.

   Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.