Genesis theme framework

Paraderain · Jun 28, 2011

Having a problem I can not seem to get around.
How can I display my categories below my header next to home?
When I use the "Genesis - Category Navigation" widget, it only give me the option to display categories to the right of the header, but that is where I select my pages to be, I want my categories to be below my header, under my logo next to the home button, I'm sure you get my point.

So why am I only being given the option to put categories to the "right of header" and not where categories should be - below header?

Thanks.

Sundace60 · Jun 28, 2011

Here's a way to quickly handle it in HTML:

Code:

<div class="art-nav">
<ul class="art-menu">
  <li> <a href="#" class="active"><span
 class="l"></span><span class="r"></span><span
 class="t">Home</span></a> </li>
  <li> <a href="#"><span class="l"></span><span
 class="r"></span><span class="t">Menu Item</span></a>
    <ul>
      <li><a href="#">Menu Subitem 1</a>
        <ul>
          <li><a href="#">Menu Subitem 1.1</a></li>
          <li><a href="#">Menu Subitem 1.2</a></li>
          <li><a href="#">Menu Subitem 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu Subitem 2</a></li>
      <li><a href="#">Menu Subitem 3</a></li>
    </ul>
  </li>
  <li> <a href="#"><span class="l"></span><span
 class="r"></span><span class="t">About</span></a>
  </li>
</ul>
</div>

Where "art-nav" and "art-menu" is just a name I used for a class. You can call it whatever you want. You can mix php and html together. You should not have a problem with the code, it's very portable.

Use it in your header.php file. Play with the placement of the code and find what fits best for you.

Here's the CSS for the art-nav and art-menu class:

Code:

/* menu structure */

.art-menu
{
  padding: 0 0 0 0;
}

.art-nav
{
  position: relative;
  height: 25px;
  z-index: 100;
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}

.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 75px;
  background-image: url('images/menuitem.png');
}

.art-menu a .l
{
  left: 0;
  right: 0;
}

.art-menu a .r
{
  width: 400px;
  right: 0;
  clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t
{
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  color: #775209;
  padding: 0 12px;
  margin: 0 0;
  line-height: 25px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -25px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -25px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -25px;
}
.art-menu a:hover .t
{
  color: #E2DFDA;
}

.art-menu li:hover a .t
{
  color: #E2DFDA;
}

.art-menu li:hover>a .t
{
  color: #E2DFDA;
}

/* end MenuItem */

/* begin MenuSeparator */


.art-menu .art-menu-li-separator
{
  display: block;
  width: 1px;
  height: 25px;
}

.art-nav .art-menu-separator
{
  display: block;
  margin:0 auto;
  width: 1px;
  height: 25px;
  background-image: url('images/menuseparator.png');
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
  display: block;
  text-align: center;
  white-space: nowrap;
  height: 20px;
  width: 180px;
  overflow: hidden;
  line-height: 20px;
  background-image: url('images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 0;
  border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 20px;
  color: #000000;

  margin:0;
  padding:0;
}

.art-menu ul li a:hover
{
  color: #000000;
  background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
  color: #000000;
  background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
  color: #000000;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
  color: #000000;
}


/* end MenuSubItem */

Hope this helps.

Genesis theme framework

Paraderain

Newbie

Sundace60

Registered Member

Main Menu

Marketplace

Making Money

BlackHat World