WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Make Logo Overlap Menu Bar (19 posts)

  1. johnthompson008
    Member
    Posted 1 year ago #

    I assuming I'm using version 3.5.1 I just installed it a few weeks ago.

    Here's what I'm trying to do, it seems complicated to me but I don't know much about coding which I assume will be necessary to do this.

    My logo is an image of a tree and roots with text on either side of the trunk, what i want is for the top of the tree to be in the header, with the text, for the trunk of the tree to pass thru the horizontal menu bar (with menu items shifted on either side to make space for it) and then for the roots to span down into the body of the page. And since this is the logo, it would be on every page that way. One more thing, the header and body of my sites pages are white, the menu bar is black. The tree is black. So i want the tree to be black against white above and below the menu bar, but where it passes thru the black menu bar to be white, so the lines of the image don't get lost.

    Right now I can't even add a thumbnail into my header without it being chopped into just the top third of the image with plenty white space left beneath it for the image to fill the header...let alone do this. So what is on my site presently is just the text that would be to the right and to the left of the tree image. But I have designed the logo of the tree in Microsoft Publisher with the text included so i can import it as one unit. Here's the way my site looks now:

    http://john-messenger.com/

    HELP!

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Please go ahead and add that logo...right now there is none, so we would be hard pressed to look at how to advise a CSS change.

  3. johnthompson008
    Member
    Posted 1 year ago #

    Thanks for your quick response. I have given my best attempt to put my logo in the header using an image widget, you can see (barely) in the top right of the header what I get. It doesn't even fill the available space. Originally i tried removing all text from the header to make more room for the logo, but all it did was shrink the white space of the header. I like the dimensions of the header the way they are now, i most likely need to scale the image to work within that space, which i could probably manage if i had any clue how to get it to do what i want it to do in the site.

    So that you can see the whole logo trying to work with here, i posted in on one of my empty pages:

    http://john-messenger.com/for-children/

    There, of course, much smaller than i would like it to be in the logo. Ideally it would fit with the text sizes and header dimensions as they are in the header now. Also the proportions in the logo of of image to text size are correct.

    Thanks!

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    There, of course, much smaller than i would like it to be in the logo. Ideally it would fit with the text sizes and header dimensions as they are in the header now

    The image should be uploaded in a proper size and resolution as desired for site. It should be a Header Image and not a Featured Image.

  5. johnthompson008
    Member
    Posted 1 year ago #

    The only option i see for loading it as a header image is the header background, which only lets me pick a half inch strip to stretch across the entire header...as background. Am i missing something?

  6. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    No you are not, but by setting as header image there are few tricks...so please do so...note: do not use the crop function...just upload as header and say no to crop it...

  7. johnthompson008
    Member
    Posted 1 year ago #

    Um, okay. Well i scaled it to a decent size, put it in without cropping, and now it has automatically been stretched to a ridiculous size. but here it is.

    [Duplicated link moderated]

  8. johnthompson008
    Member
    Posted 1 year ago #

    Making progress. Experimenting with different file types I switched header image from GIF to PNG and i got it the right size. Now i just need to shift it down thru the menu board so i can tighten up the header again to just the height of the top portion of the tree.

    [Duplicated link moderated]

    thanks!

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    It sounds as though you'll need to play about with CSS absolute positioning
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/
    http://csscreator.com/forum

  10. johnthompson008
    Member
    Posted 1 year ago #

    Okay I'm studying HTML and CSS trying to get a grip on things here, in the meantime I have another specific question. I have somehow managed to get one of my png saved images to show at a decent size, as shown on my site:

    http://john-messenger.com/

    I took this same image out of microsoft publisher where i designed it, imported it into Gimp, made the background transparent, and then scaled the image by 50% (as i did in the image posted in the header now) and wordpress made it HUGE and fuzzy. So i went into gimp and scaled it again by 50% and uploaded it into my header and wordpress expanded it to the same giant size, only it was MORE fuzzy since it was expanding a smaller image. why is this happening? it's still a png file, which seemed to be the golden ticket as far as getting any image to show up the way i sized it.

    Thanks!
    john

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    John - from what I can see, you may have better luck putting the tree graphic as a background image in the wrapper div - and then positioning the page elements around that image.

  12. johnthompson008
    Member
    Posted 1 year ago #

    Sorry about the multiple posts, i stopped getting responses on this one and thought maybe it had moved to the bottom of the pile and people weren't seeing it anymore or something.

    Anyway, so you're suggesting just putting the tree as the background image the way i had it, and then moving the whole menu bar up over it? Any ideas to get me started on how to try that? Also how to move apart the menu links to make space for the image to pass between them?

    I'm starting to kind of understand how to modify things myself as people give me specific examples of how to do a thing i'm asking for. once i've done it with one thing, i get it and can do it with other things. so i'm now able to individually edit all the fonts all colors for individual menu items, a different post someone helped with doing it on one. but now i need to understand what it looks like to move individual menu items, or specific groups of menu items.

    Thanks!

    =============RE:

    Okay here's my website:

    http://john-messenger.com/

    Here's what i'm trying to do. I'm new to CSS but I'm using Firebug to locate the elements I want to edit and playing around with trying to manipulate them. A lot of trial and error. But i want to do a few things that seem complex to me. The tree logo that is at the top, i want to move it down so that the words are just above the top of the menu bar and the image of the tree passes thru the menu bar, tree top in the header, roots in the body, and the menu items parted in-between "poetry" and "creative non-fiction" So i want "poetry" and "non-fiction" on the left side of the portion of the tree image going thru the menu bar, evenly spaced on their side, and all the other menu links on the right, evenly spaced on their side. I potentially want to invert the color of the tree trunk where it passes thru the menu bar from black to white so that the lines of the image don't get lost passing thru the black menu bar. At this point, i would be happy if i was able to make any of the menu items move their positioning individually (so far i've only been able to affect them by changing their padding and thus squeezing them all or widening them all). Also, i would be happy if i could move the tree...at all. I figured how to move my head shot on the home page by adjusting the margins:

    .alignleft {
    float: left;
    margin: -25px 10px 10px 0;

    But the tree doesn't give me pixels to play with, all i can find with Firebug relating to the trees alignment is:

    #site-title img {
    vertical-align: middle;

    Which doesn't do anything when i play with it.

    Help!

    Thanks

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I would try putting the tree as a background image in this CSS:

    #wrapper {
        background: none repeat scroll 0 0 #F8F8F8;
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
        margin: 0 auto;
        max-width: 1140px;
        overflow: hidden;
        position: relative;
    }

    I think that's going to be the easiest way to get it below the header/menu section -- as the wrapper contains the whole page. I jus think putting an image (not as background) in the header is going to be tricky (if it's even possible) to get it to go behind lower elements on the page.

  14. johnthompson008
    Member
    Posted 1 year ago #

    Thanks, I've gotten this far!

    http://john-messenger.com/

    Main things I'm struggling with now are to increase font size of all menu items, and shift the entire menu grouping to the left. I've tweaked it so it should space out just right if i can get the whole menu bar to left justify. couldn't figure that one out.

    Ah, one more thing. Now that i've adjusted padding to 6px the spacing is great (between links, not overall) but i will want just the "home" link (which is permanently highlighted in what is now "peru" which was a typing accident in Firebug that i really liked Tongue ) to have the peru colored portion around it be wider, that is to say, to have a little bit more space between "home" and "poetry" than the rest. I really like how that one chunk of color stands out in contrast to the rest of the black and white, but if it's too narrow it doesn't accomplish the balance if that makes sense. I'd like to give just "home" a padding of 20px

    I think i'm starting to understand CSS enough that i get how to type commands, but even with firebug i still really have trouble finding the right selectors. I'll get there. I really appreciate your help.

    Thanks!

    John

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Wow, John, that looks great! Just to be sure - you want the home and poetry menu items on the other side of the tree?

  16. johnthompson008
    Member
    Posted 1 year ago #

    THanks! Yes, the links are spaced well and there is a space between them for the tree, I just need to move all of them left so the home and poetry are on the left of the tree and everything else the right. And then adjust the horizontal padding of the "home" item only.

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, I think this will do the first:

    #access {
        float: left;
        margin-top: 99px;
        width: 100%;
    }

    then you'll need to fuss with the padding/margins to space the items out if you want.

    One way you can probably target the home item only is by using the specific item class - look in the HTML:

    <li class="page_item page-item-6 current_page_item">
    <a href="http://john-messenger.com/">Home</a>

    So you can use the page-item-6 as a selector - try this one (not tested but gives you the idea:

    li.page-item-6 > a {
        background: none repeat scroll 0 0 peru;
        color: #FFFFFF;
        padding: 69px 20px;
        text-decoration: none;
    }
  18. johnthompson008
    Member
    Posted 1 year ago #

    Thanks. Not having any luck with the first. I tried that when i was fooling with things, i thought it should work too. Could there be something else blocking it? here's the Custom CSS i have presently. (I tried both adding it to the #access that was already there, and alternately just adding it again at the bottom, didn't work either time. Haven't played with the second yet.)

    #attachment-nav a img {
    border: 3px solid #B7B7B7;
    }
    #site-title {
    font-family: "Oswald",sans-serif;
    font-size: 32px;
    left: 15px; margin: 0;/*the other stylesheet has margins declared;
    delete it or override here as {margin: 0;}*/
    letter-spacing: 1px;
    position: absolute;

    }

    #access {
    margin-top: 99px;
    }

    #access ul {
    background-color: rgba(17, 17, 17, 0.5);
    font-weight: 600;
    list-style: none outside none;
    margin: 0;
    padding: 50;
    text-align: middle;
    text-transform: lowercase;
    }

    #access li { /*style.css has float set; delete or set float
    here as none*/
    float: none
    display: inline-block;
    margin: 0 0.5em;
    padding: 0;
    position: relative;
    vertical-align: top;
    }

    #access ul li:nth-child(2) {
    margin-right: 155px; /*the separator*/
    }

    #access a {
    padding: 69px 6px;
    }

  19. johnthompson008
    Member
    Posted 1 year ago #

    Got it! Thanks yall

Topic Closed

This topic has been closed to new replies.

About this Topic