Viewing 10 replies - 1 through 10 (of 10 total)
  • That should be possible, but you’ll need to post some more information first. Could you post a link to your site (if it’s already running) and say which theme you’re using please.

    Thread Starter Shah Nawaze Pavel

    (@nawaze007)

    yes, I am trying to convert this html to wordpress

    site: http://previewmediasmack.net/sjpi/

    What theme are you using? Where did you download it from?

    Thread Starter Shah Nawaze Pavel

    (@nawaze007)

    I am converting that theme html to wordpress.

    Have you reviewed Theme Development?

    Thread Starter Shah Nawaze Pavel

    (@nawaze007)

    I have seen, now I am building the theme. But it is too hard to build the theme. I am new and learning html to wordpress. Would you please help me?

    [Moderator Note: No bumping. If it’s that urgent, consider hiring someone instead.]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What specifically do you need help with?

    Help you to do what? I’m sorry but this level of coding is really beyond the scope of the support we are able to provide in the forum. If you have a specific issue, we may be able top help but we cannot build your theme for you.

    Thread Starter Shah Nawaze Pavel

    (@nawaze007)

    I tried to build a dropdown menu like this: http://www.losangeles-injurylawyers.com/

    but i reached here: http://previewmediasmack.net/sjpi

    html style and wp menu style pure different.

    html menu codes:

    #nav-wrap .container{ clear: both; overflow: hidden; position: relative; }
     #nav-wrap { clear: both; padding:0; margin:0; }
     #nav-wrap .container ul { list-style: none; float: none; border-top:4px solid #a6121f; background:#1c1d1e url(images/nav-red.png?484209) repeat-x; overflow:hidden !important; }
     #nav-wrap .container ul li, #icontent #nav-wrap .container ul li, #icontent #nav-wrap .container ul li:last-child{ list-style: none; float: left; padding:0 1px 0 0; background:url(images/nav-sep.png?484209) right center no-repeat; display:block; }
     #nav-wrap .container ul li:last-child, #icontent #nav-wrap .container ul > span:last-child li{ background:none; padding:0; }
     #nav-wrap .container ul li#active, #icontent #nav-wrap .container ul li#active{ background:none; padding:0; }
     #nav-wrap .container ul li a{ float:left; display:inline-block; color: #e4d0ae; font-size:16px; text-decoration: none; font-family: 'Trade Gothic LT Std', 'Myriad Pro', Arial, Helvetica, sans-serif; padding:0px 30px 0px; border:0; outline:0; line-height:59px; height:59px; list-style-type:none; text-transform:capitalize; overflow:hidden; }
     #nav-wrap .container ul li#active a, #nav-wrap .container ul li a:hover{ color: #fff; background:url(images/nav-current-red.png?484209) repeat-x; }
     #wsite-menus .wsite-menu{ margin-left:0px; background:url(images/submenu-inner-red.png?484209) repeat-y; }
     #wsite-menus > .wsite-menu-wrap > .wsite-menu{ background: #980e19 url(images/submenu-red.png?484209) right top repeat-y; margin-left:0; }
     #wsite-menus .wsite-menu li{ }
     #wsite-menus .wsite-menu li a{ text-transform:capitalize; font-weight:normal; font-family: 'Trade Gothic LT Std', 'Myriad Pro', Arial, Helvetica, sans-serif; padding:12px 15px; font-size:14px; color:#fff; border:0; background:none; margin-right:1px; }
     #wsite-menus .wsite-menu li a:hover{ background-color: #860a12 !important; }
     #wsite-menus span.wsite-menu-title{ padding:0; }
     #wsite-menus .wsite-menu li, #wsite-menus .wsite-menu li {width:170px;}
     #wrap-in{ background: #efefef url(images/tall-wrap-in-red.png?484209) center top repeat-x; padding:20px 0 0; }
     .wsite-custom-background #main-wrap { background-color: #efefef; }

    how to use it in wp…?

    You seem to be starting off on the right lines. Rather than being daunted by the task as a whole it helps to break down what you need to do. As I see it there are 3 main things you need to do in your css to get a basic functioning dropdown menu.

    1. Hide the submenus by default
    2. Use the :hover pseudo selector to reveal the submenus when you hover on it’s parent item. Remember that :hover doesn’t have to go at the end of a css selector, a selector like .parent:hover .child lets you apply styles to an element when you’re hovering on it’s parent
    3. Unfloat the items in your submenus so they appear vertically rather than horizontally

    Beyond that I expect you will have to do some more positioning work, especially with 3rd level menus, and maybe a bit more styling as well, but if you can manage these things I think you will be in a much better position. Good luck!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Dropdown Menu Help’ is closed to new replies.