ThemeShaper Forums » Thematic

Moving the menu above the header image

(6 posts)
  • Started 11 years ago by eyecurious
  • Latest reply from EricH
  • This topic is resolved

Tags:

  1. eyecurious
    Member

    Hi, I have a question regarding adding a header image using a Thematic child theme. I should say I am a total novice to CSS and have no knowledge of php. I have successfully added an image using the child theme I created (thanks Ian!). However I am wondering if there is a way of making the Thematic menu items (e.g. About) appear ABOVE the header image rather than below it, which is the default.

    For an example of what I am looking for have a look at http://www.featureshoot.com/ I am not sure if this site is built with Thematic, but it seems to follow a very similar structure.

    Thanks!

    Posted 11 years ago #
  2. If you could provide a link to your site it would be helpful. This can all be done with css, you don't want to edit the header file because it layes everything out the way it should be for accessibility and SEO reasons.
    something like this should work.
    #header {
    position:relative;
    }
    #access {
    position:absolute;
    top:1px;
    }

    Posted 11 years ago #
  3. eyecurious
    Member

    Thanks Eric, my site is www.eyecurious.com. I managed to get the menu to sit above the banner logo but I could not figure out how to make them align properly with each other bu using the code you suggested.

    Cheers!

    Posted 11 years ago #
  4. Try this code in your child theme's functions.php:

    // remove the access menu from its current position
    function remove_access() {
      remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_access');
    
    // .. and put it back into action at the top
    add_action('thematic_header','thematic_access',0);

    Chris

    Posted 11 years ago #
  5. Building on what you have now, this should work. It's far from perfect, but at least adds a link to your header. I haven't tested this in anything but firebug.
    Add this to your styles.

    #header {
    (get rid of your background)
    position:relative;
    }
    #branding {
    margin:0 auto;
    overflow:hidden;
    padding:0;
    width:940px;
    }
    #blog-title {
    font-family:Arial,sans-serif;
    font-size:34px;
    font-weight:bold;
    line-height:40px;
    padding:40px 0 0;
    }
    #blog-title a {
    background:transparent url(images/eyecurious_logo_2.jpg) no-repeat scroll center top;
    display:block;
    height:118px;
    text-indent:-9999px;
    width:100%
    }
    #access {
    border-bottom:0 none;
    font-family:"Lucida Grande",Geneva,Helvetica,sans-serif;
    font-size:0.9em;
    font-variant:small-caps;
    height:30px;
    overflow:visible;
    position:absolute;
    top:0;
    width:100%;
    z-index:100;
    }

    Posted 11 years ago #
  6. BTW eyecurious I really like the look of the site. It's clean and very pretty. Well done.

    Posted 11 years ago #

RSS feed for this topic

Reply

You must log in to post.