1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Genesis theme framework

Discussion in 'Blogging' started by Paraderain, Jun 28, 2011.

  1. Paraderain

    Paraderain Newbie

    Joined:
    Jun 25, 2011
    Messages:
    32
    Likes Received:
    30
    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.
     
  2. Sundace60

    Sundace60 Registered Member

    Joined:
    Jun 22, 2009
    Messages:
    53
    Likes Received:
    18
    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.