Try Tuts+ Premium, Get Cash Back!
Adaptive Blog Theme: Finishing up the Header
videos

Adaptive Blog Theme: Finishing up the Header

on Nov 16th 2012 with 29 comments
Tutorial Details
  • Screencast duration: 46 mins
  • Difficulty: Beginner
  • Topic: CSS
Download Source Files
Demo View It Online
This entry is part 7 of 14 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

Continuing with styling our web page, let’s now finish off the header. We’ll sort out the logo, the leaderboard ad and we’ll style our navigation, including the multi-level dropdown.

Logo and Leaderboard Ad


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Navigation Styling


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Navigation CSS Transitions


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/rafaelbuse Rafael Buse

    Adi, what is this theme for coda you been using?

    Tks

    • Adi Purdila
      Author

      It’s called Special Board. Using the Espresso Mono font for the editor.

  • http://www.facebook.com/vinod.cg.1 Vinod CG

    found a bug.. if u click on show menu and then resize browser view looks awkward..

    • Adi Purdila
      Author

      Awkward how? Can you send a screenshot :D ?

      • http://twitter.com/borowskirafal Rafał Borowski

        I think he means that when you resize to mobile format and click “select a page” and then resize back to desktop size the shown menu doesn’t hide. It’s not a big problem in my opinion as this is not a “real life scenario”. Either you watch it on an phone or not…. but just for the sake of argument you can add “.hidden-desktop” class to “rwd-top-nav” div and it will then disappear when resized from mobile to desktop.

        @Vinod CG
        It’s not a bug. It’s a feature ;)

        • Adi Purdila
          Author

          Oh, ok. I see what you mean :D Yeah, didn’t consider the case where you revert back to a larger view, but as @twitter-291057914:disqus said, on a real life scenario you’re either on a phone or on a larger screen.

          • http://www.facebook.com/vinod.cg.1 Vinod CG

            well it might be a problem of big tablet like Asus Transformer it might be a problem.. You might as well consider this scenario too :P

        • http://twitter.com/xavortm Alexander Dimitrov

          Nah, when i see responsive design, i love to change browser width like 100 times (at least) :D

  • camelos

    menu doesnt work
    when i hover dropdown “level 2 item 2″ level 3 is shown but then when i hover “level 3 item 1″ the last one dissapears often
    it is hard to click on level 3

  • torrance scott

    Does anyone else see repeated icons in the sidebar? I get 9 total when I look at it. On Chrome Version 23.0.1271.64

    • http://laranz.in/ lawrence77

      that is just some placeholder icons, its not repeating :)

      • torrance scott

        sorry! should pay more attention to the lectures :) thanks for the replies.

    • Adi Purdila
      Author

      Yes, they are repeating, but the purpose of that is to check if the list items have proper right and bottom margins :)

  • Chris

    I noticed this

    height: 63px;
    line-height: 63px;

    whats the reason for not using em or do height, line-height, font-* have to be pixels?

    • http://twitter.com/borowskirafal Rafał Borowski

      Since the link in menu is changed to 13px (13 becoming the 1em) setting height equal to 63px would be impossible with em’s.

  • funerina

    I don’t understand why the logo needs to an image. Simple text with the web font Bree Serif seems easier.

    • Adi Purdila
      Author

      True. In our case it would work perfectly, but if for example you’re making this theme for sale, the possible clients could have image logos and your text approach wouldn’t work.

      • http://www.facebook.com/abohay Ahmed Amin

        i dont know why the logo resize and make padding and what about if i make margin-top only why you did all this steps and give class logo container

        • Adi Purdila
          Author

          Giving the logo a separate class allows for faster customizations later on. You can achieve the positioning using margins as well, not a problem, but I preferred using paddings in this case.

  • John

    Very useful and well-done tutorial! Thank you, Adi.

    Can someone explain to me how this works please?

    The code below is only applied to the 2nd level ‘ul’, yet it affects the 3rd level ‘ul’ too. Why is that? I thought the ‘>’ operator selects only the first level of children.

    &:hover > ul {
    opacity: 10;
    filter: alpha(opacity=100);
    visibility: visible;
    }

    This is on line 336 and on line 451.

    • Adi Purdila
      Author

      Hi John,

      Those are actually styles for lvl 3 ul, the lvl 2 ones are at line 288 :)

      • John

        Thanks, Adi. I guess what is still unclear to me is why does ‘opacity: 0;’ appear twice (Line 289 [Level 3 ul] and Line 320 [Level 2 ul]), while ‘opacity: 10;’ appears only ONCE, on line 337, which seems to be for level 2 ul.

        ‘opacity: 10;’ on line 337 is sitting under the 1st level li element (is subordinate to it), AND the selector has a ‘>’ operator in it. ‘opacity: 10;’ should only apply to level 2 ul, yet it applies to level 3 ul also. This is what baffles me, because the ‘>’ operator should cause ‘opacity: 10′ to work only on the 2nd level ul, as explained here: http://stackoverflow.com/questions/4459821/css-selector-what-is-it.

        Anyway, this is not something crucial, and there might not be an explanation as to why this is happening. I just thought I would ask.

        • Adi Purdila
          Author

          Hi Nelu,

          For some reason I called you John the first time, I thought that was the name I saw on your profile. Sorry about that :)

          This took a bit of digging and I realized I made a mistake. This:


          opacity: 0;
          filter: alpha(opacity=0);
          visibility: hidden;

          on line 319 (so the styling for the level 3 submenu) is redundant and here’s why. Notice that in all the navigation styling, we start targeting like this .top-menu-navigation ul and not .top-menu-navigation > ul. That means the styling will apply to any ul inside .top-menu-container (meaning level 2 and level 3 as well). So, when we do this:


          .top-menu-container .top-menu-navigation ul > li ul {
          opacity: 0;
          filter: alpha(opacity=0);
          visibility: hidden;
          }

          we’re targeting the ul’s of all the direct li descendants of any ul inside that nav. And the same goes for when we show the menu by setting the opacity to 10.

          I hope that makes sense :D If not, let me know, I’ll try to explain it better.

          • Nelu Malancea

            Excellent explanation! Thanks for taking your time to answer this. Definitely helpful.

            P.S. You’re right, I had my English name up there :) but I just updated my Disqus profile.

  • Pingback: From Photoshop to Wordpress Theme | MBAx.me