HTML to Worpress

(@rasta_wdpr)

https://www.mountainhighorganics.com/mhoincdev/

i’m so close.. i just cant seem to connect everything correctly…

made some changes the page file and that helped…

but dont know why the home page loads images but the other menu items dont..

(@crouchingbruin)

dont know why the home page loads images but the other menu items dont.

It’s because your image tags are missing a leading backslash in the src attribute before the word images.

For example, for the main logo, change this:

<img border="0" alt="" align="left" width="257" height="154" src="images/MHO_logo.gif">

to this:

<img border="0" alt="" align="left" width="257" height="154" src="/images/MHO_logo.gif">

Thread Starter

(@rasta_wdpr)

https://www.mountainhighorganics.com/mhoincdev/

yup! lol exactly the issue…

take a look its shaping up now..

(@crouchingbruin)

Looking good. The hardest part left is figuring out the CSS to use for the menu.

Thread Starter

(@rasta_wdpr)

yea… not even sure where to start… any thoughts?

(@crouchingbruin)

First of all, did you create the menu by going to Appearance > Menus? You need to do that. Drag & drop your pages into the right Menu Structure area. Arrange your top level menu items in order, then put your sublevel menu items underneath the top menu items, indenting them by one level.

Thread Starter

(@rasta_wdpr)

yes I did all that.

(@crouchingbruin)

You’re still missing a closing DIV at the end of your header.php file. It should come right after the code that creates the menu. Otherwise, your content pushes up into the header area.

As far as menus go, the web element that’s currently most used for creating menus is the UL tag. Normally, the UL tag is used for creating Unordered (i.e., bulleted) Lists, but with some CSS styling, an unordered list can be converted into a menu. Sub-menus are just unordered lists nested with a list item (LI) of a top-level unordered list.

So you can use the same CSS from the original site, you just need to adjust the selectors to fit the class and ID names in the new site. For example, this is the CSS from the original site that’s used to style the top-level menu items:

.menu, .menu ul {
   list-style-type:none;
   padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}

.menu li.top {
   float:left;
   display: block;
   position:relative;
}

The first rule sets the overall properties of the menu, because you don’t want bullets to appear next to the list items in the menus. The menu in the original site has a class of menu. In the BlankSlate theme, the corresponding menu container also has a class of menu, so that’s very convenient, you can just copy & paste the first rule over into the new site’s style.css file without any changes.

The second rule applies to the list items with a class of top. I suppose that’s how the developer distinguished top level menu items from sub-menu items. In BlankSlate, there isn’t a class which distinguishes top-level menu items from sub-level menu items, but a top-level menu will have a class of menu while any sub-menus will have a class of sub-menu. Plus, using the > operator, we can select just direct children (list elements) of the top-level menu and not all list elements of sub-menus. So the selector of the second rule should be modified to this and pasted into your new style.css file:

.menu > li {
   float:left;
   display: block;
   position:relative;
}

This next rule, from the original CSS file, “hides” the sub-menu items by shifting it’s position way off the screen (a common technique). It uses the existing class name of menu, so it can be copied over “as-is” without any modification.

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
}

This next set of rules reveals the sub-menu items when the mouse is hovered over the parent list item:

.menu :hover ul.sub {
   left:0px;
   top:25px;
   padding:0px 0px;
   white-space:nowrap;
   width:176px;
   height:auto;
   background-color: #FFFFFF;
   color: #5C3917;
}
.menu :hover ul.sub li {
   display:block;
   height:23px;
   position:relative;
   float:left;
   width:90px;}

.menu :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:22px;
   width:175px;
   line-height:23px;
   text-indent:10px;
   color:#5C3917;
   text-decoration:none;
   background-color: #FFFFFF;
   border: 1px solid #D5D6D7;
}

As I mentioned earlier, the sub-menus in BlankSlate have a class of sub-menu, whereas the original site used a class of sub, so to make these rules work, change the ul.sub portion of the above three rules to ul.sub-menu and paste them into your style.css file.

At this point, your menu should now display just the top-level menu items, and hovering the mouse over either the Home or Products menu items should display the sub-menus.

Thread Starter

(@rasta_wdpr)

wait where exactly should the closing div go? i just tried a couple places and it screwed the design…

(@crouchingbruin)

Can you paste in the contents of your header.php?

Thread Starter

(@rasta_wdpr)

here:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( ' | ', true, 'right' ); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>

<div id="divWrapper">
<div id="divBanner"><a href="default.asp"><img border="0" alt="" align="left" width="257" height="154" src="../images/MHO_logo.gif" /></a>
<div id="divTopLinks"><a href="https://www.mountainhighorganics.com/mhoincdev/our-retailers/">Our Retailers</a> | <a href="https://www.mountainhighorganics.com/mhoincdev/site-map/ ">Site Map</a> | <a href="https://www.mountainhighorganics.com/mhoincdev/privacy/">Privacy Policy</a>     <br/> <br/> <br/>  <br/>
    <img src="../images/makers_logo.jpg" alt="makers of logo" width="300" height="48" border="0" /></div>

<nav id="menu" role="navigation">

<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</nav>
</header>
<div id="container">

Thread Starter

(@rasta_wdpr)

i tried that code you wrote, and it broke the design…

i wrote a menu like this a few years ago…using rollover images,… i just forgot how to do it…

if you look now you will see the design is a skew

Thread Starter

(@rasta_wdpr)

@crouchingbruin

Made a huge head way… Take a look

last tiny problem is i’m trying to get the menu text to be white with brown backgrnd on roll over and the submenu text to be brown with white backgrnd… just like the orig site:
look here

currently its just black text both menu and submenu text…
cant figure it out…

any thoughts? see code:

/* Navigation Menu */

    /* ===== Top ===== */
nav#menu {
    clear: both;
    position: absolute;
    margin-left: 350px;
    top: 120px;
    color: #ffffff;
    }

    .menu-menu-container ul#menu-menu {
    list-style:none;
    margin:0;
    padding:1px 0;
    }
    .menu-menu-container ul#menu-menu li{
    float:left;
    }
    /* ===== First Level ===== */
    .menu-menu-container ul#menu-menu li {
    position:relative;
    padding:0;
    margin:0;
    border-right:0px solid #999;
    background: #ffffff;
    }
    .menu-menu-container ul#menu-menu ul li {
    border:none;
    background: #ffffff;
    color: #C1001F;
    }

    .menu-menu-container ul#menu-menu li a {
    display:block;
    text-decoration:none;
    font-size: 11px;
    color:#5c3917;
    padding:0px 15px;
    line-height:23px;
    }

  .menu-menu-container ul#menu-menu li:hover a {
    position:relative;
    background:#5c3917;
    color:#000000;
    }

    .menu-menu-container ul#menu-menu ul, .menu-menu-container ul#menu-menu li:hover ul ul {
    position:absolute;
    display:none;
    }
    .menu-menu-container ul#menu-menu ul li:hover ul, .menu-menu-container ul#menu-menu li:hover ul li:hover ul {
    display:block;
    top:0px;
    left: 100%;
    color: #5c3917;
    }
    /* ===== Second and Third Level ===== */
    .menu-menu-container ul#menu-menu li:hover ul {
    display:block;
    position:absolute;
    left:0;
    top:100%;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    }
    .menu-menu-container ul#menu-menu ul {
    background:#777;
    }
    .menu-menu-container ul#menu-menu ul ul {
    background:#e4e4e4 !important;
    border-color:#e4e4e4 !important;
    margin-left:-14px;
    }
    .menu-menu-container ul#menu-menu ul li a {
    float:none;
    width:180px;
    line-height:normal;
    font-variant:normal;
    font-weight:normal;
    font-size:11px;
    color:#ffffff;
    text-transform:none;
    padding:6px 10px;
    background:none !important;
	border: 1px solid #D5D6D7;
    }
    .menu-menu-container ul#menu-menu ul ul li a {
    color:#ffffff;
    font-weight:bold;
    }
    .menu-menu-container ul#menu-menu ul li:hover>a {
    background:#ffffff !important;
    color:#999 !important;
    }
    .menu-menu-container ul#menu-menu ul ul li:hover>a {
    background:#eee !important;
    color: #777 !important;
    }

(@crouchingbruin)

Wow, it’s looking great! By the time you get through, you will be a better WordPress developer than 99% of WordPress users out there.

Add this CSS:

.menu-menu-container ul#menu-menu li:hover > a {
  color: #fff;
}

.menu-menu-container ul#menu-menu ul.sub-menu li:hover a {
  color: #5c3917
}

You also need to take the !important clause off of the two properties in this rule because it’s hindering the effect of other rules:

.menu-menu-container ul#menu-menu ul li:hover>a {
    background:#ffffff !important;
    color:#999 !important;
}

I see beginners overusing !important when they don’t understand CSS specificity. It gets to the point where you then have to start using !important in later rules to override the !important in a previous rule, and you don’t want to get into doing that. Just use a selector which is specific enough for the element you want to target.

Thread Starter

(@rasta_wdpr)