WordPress.org

Ready to get started?Download WordPress

Forums

Magazine Basic
How to Make Header Overlap Menu Bar (15 posts)

  1. debsied
    Member
    Posted 8 months ago #

    I would like my header to overlap the menu, something like on this website: http://john-messenger.com/

    Using css: margin-bottom: -40px; I am able to get the header to finish below the menu bar, but I can't get the .png header to appear over the menu bar, only under. When I make the z index of the header higher than that of the menu bar the menu bar disappears. My CSS skills are minimal and I am stabbing in the dark.

    Also, how can I get the menu items to space so that the bits of the header which overlap are in between the menu items?

    This is the website I am working on: http://www.photomobil.co.il/

    Many thanks in advance for your help!
    Deborah

    http://wordpress.org/themes/magazine-basic/

  2. designbyjesseR
    Member
    Posted 8 months ago #

    could it be resolved by changing the opacity of the nav bar? here is a little code declaration try it out and see if you're happy with the result :-) play around with the value.

    #site-navigation, #site-sub-navigation {
    opacity: 0.85;
    }

  3. debsied
    Member
    Posted 8 months ago #

    Jess thanks so much for answering and thanks for the code snippet!

    Making the nav bar more transparent doesn't solve it. What I want is for the flowers in the header to overlap/appear in front of the black the menu bar. (When I manage to do this I will re-design the header so that one or two flowers dip down onto and below the navigation bar.) So I need the header to appear in front of the nav bar. Any further ideas gratefully appreciated!!

  4. Andrew
    Forum Moderator
    Posted 8 months ago #

    I guess the simple solution is not to use a header image with a background colour and instead to leave it transparent.

  5. debsied
    Member
    Posted 8 months ago #

    Oh my goodness! I was certain my image had a transparent background!! But Andrew your post made me check - and it wasn't! What a silly mistake! Thanks so much! Could anyone please advise how to space out the menu items to allow for the flowers to sit in between? Thanks so much! Deborah

  6. Andrew
    Forum Moderator
    Posted 8 months ago #

    could anyone please advise how to space out the menu items to allow for the flowers to sit in between?

    That's pretty difficult. You'd think you can just move the menu items left, but because people can set their own font size and style in browsers or device settings you'd never know the absolute width of menu items. The widths would change. You wouldn't know how far left/right to move the menu items.

  7. debsied
    Member
    Posted 8 months ago #

    Oh I see..... So even though this site looks amazing in my browser - http://john-messenger.com/ - you're saying that in another person's browser the image might not sit in the right place relative to the menu titles?

    Thanks so much for your help!

    Deborah

  8. Andrew
    Forum Moderator
    Posted 8 months ago #

    Yeah, I'm not short-sighted but I increased the font size on that site by 40% to see what it would be like and it sort doesn't work as expected: http://snag.gy/ygVOW.jpg

  9. debsied
    Member
    Posted 8 months ago #

    I see what you mean. Actually I see that playing around with the viewing size can muck up all sorts of things. The slide show only fits perfectly into its frame at a certain font size. Food for thought.... Thanks Andrew.

  10. debsied
    Member
    Posted 8 months ago #

    Help! Now I have my transparent header overlapping the menu as I wanted. It looks good but I've just realised that it disables the menu! Is there any way round this?

    http://www.photomobil.co.il/

    Thank you!

    Deborah

  11. Andrew
    Forum Moderator
    Posted 8 months ago #

    That problem will remain as long as you have the header image on top of the navbar.

    The only way I can see this working is if you instead create images for each menu item that consists of both the black background colour and flower, using the CSS sprite technique.

  12. debsied
    Member
    Posted 8 months ago #

    Ok, thank you! The sprite technique could work for me because I only need the images to overlap the menu bar slightly. But I'm not succeeding in doing this. This is what I have added to style.css:

    img.home
    {
    width:70px;
    height:75px;
    background:url("http://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png") 479 126;
    }

    I used GetSprite for the size and positioning. I'm sorry I'm not au fait with CSS. Could you please advise?

    Thank you in advance!

    Deborah

  13. Andrew
    Forum Moderator
    Posted 8 months ago #

    Try putting "px" on the end of your numbers, "479" and "216", but you need to target the individual menu items and not "img.home".

    For example,

    #menu-item-85 {
     background:url("http://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png");
    }

    The image itself should have little white space so that you can find your flowers or butterflies easily, for example see this sprite: http://www.alexmourer.com/wp-content/uploads/2013/09/css-sprite.png

    Make sure you also apply the black bar behind in the sprite - this is the only way you'll get the flowers on top of the black bar (in the image editing software you're using).

    As you already have a black bar in your sprite image you need to remove it from the <nav> element, e.g:

    #site-navigation {
     background: none;
    }

    You'll notice there's now a white gap before your first menu item "English" because the <nav> element doesn't have the black bar style. To get this black bar back try this style:

    #site-navigation li:first-child:before {
     content: "";
     position: absolute;
     left: -353px;
     top: 0;
     width: 352px;
     height: 100%;
     background: #333;
    }

    Everything should be put within a media query so that you don't affect the mobile menu (I assume you don't want that to have this styling).

  14. debsied
    Member
    Posted 8 months ago #

    Thanks for the instructions. I did as you suggested:

    #menu-item-78
    {
    width:25px;
    height:22px;
    background:url("http://www.photomobil.co.il/wp-content/uploads/2013/11/sprite-flowers.png") -14px -68px;
    }

    And indeed the flower showed up on the menu bar and was clickable, but the menu bar became deep and skewed off to the right of the page. Maybe it's just a question of playing around with the positioning but I'm thinking this method won't work for this issue because I wanted the flowers and butterflies to just overlap the menu bar a little, as they do here: http://www.photomobil.co.il/ (looks how I want it but menu is disabled). With the method you suggested the whole flower appears on the button, which is not what I wanted. Is there any way I can place these sprites in my theme, as they appear at the moment, slightly overlapping, without disrupting the menu bar?

    Thanks so much for your help.

    Deborah

  15. Andrew
    Forum Moderator
    Posted 8 months ago #

    This can be possible using the techniques I suggested, but it is complicated to implement and I would recommend hiring someone to do it for you:

    http://jobs.wordpress.net
    http://directory.codepoet.com

Reply

You must log in to post.

About this Theme

About this Topic