CODEWITHSUNDEEP
cssorchardcms
JQuery Mobile
JQuery Mobile

Reputation: 6291

Styling Navigation Two Different Ways in Orchard Page

I have a Orchard site that I'm working on. This site uses the same navigation links in the header and the footer of the page. The trick is, the links need to be styled differently. Here's an overly simplied version of my code:

<header>
  @Display(Model.Navigation)
</header>

...

<footer>
  @Display(Model.Navigation)
</footer>

When I run the page, the following HTML is generated:

<header>
  <div class="zone zone-navigation">
    <article class="widget-navigation widget-menu-widget widget">
      <nav>
        <ul class="menu menu-main-menu">        
          <li class="current first"><a href="/Site/">Home</a></li>
          <li><a href="/Site/Blog">Blog</a> </li>
          <li><a href="/Site/Contact">Contact</a></li>
          <li class="last"><a href="/Site/About">About Us</a></li>
        </ul>
      </nav>
    </article>
  </div>
</header>

...

<footer>
  <div class="zone zone-navigation zone zone-navigation">
    <article class="widget-navigation widget-menu-widget widget widget-navigation widget-menu-widget widget">
      <nav>
        <ul class="menu menu-main-menu menu menu-main-menu">        
          <li class="current first"><a href="/Site/">Home</a></li>
          <li><a href="/Site/Blog">Blog</a> </li>
          <li><a href="/Site/Contact">Contact</a></li>
          <li class="last"><a href="/Site/About">About Us</a></li>
        </ul>
      </nav>
    </article>
  </div>
</footer>

It seems odd that the class names are listed twice in the second usage of Model.Navigation. Regardless, I currently have the following css class definitions in a css file I'm referencing:

.menu-main-menu { list-style-type:none; display:inline; vertical-align:bottom; }
.menu-main-menu ul { float:left; margin-left:-1em; }
.menu-main-menu li { float:left; line-height:32px; border-left:1px solid green width:auto; font-size:10.5pt; font-weight:bold; font-family:Arial; }
.menu-main-menu li:first-child { border: 0;}
.menu-main-menu li a { display: block; padding: 0 1em; height:48px; }
.menu-main-menu li.current a, .menu-main-menu li.current a:hover {background:#d8e0be}
.menu-main-menu li a:hover {background:#e9e6d7; text-decoration:none}

My first navigation section looks right. How do I style the navigation items in the footer so they look different? Thank you

Upvotes: 0

Views: 1100

Answers (1)

MikeTedeschi
MikeTedeschi

Reputation: 583

Use your header and footer tags that contain the .menu-main-menu class. This will help you differentiate between the two on the page:

.menu-main-menu { ... }
header .menu-main-menu { ... }
footer .menu-main-menu { ... }

Upvotes: 1

Related Questions