WordPress.org

Forums

Twentytwelve navigation bar + header positioning (36 posts)

  1. jojojovich
    Member
    Posted 2 years ago #

    Hi. I can really use some help (keeping in mind I don't know much about CSS and nothing about php). How can I move my navigation bar flush to the bottom of my 960x250 header image. I'd also like to move the header image to the tip-top of my page, retaining the title+tagline as text in their original position on top of the header image.

    I'd like to keep these 3 changes in the css file if possible so I can find these positioning changes easily to edit later if needed. The header image + nav bar seem interrelated while I experiment with the [child theme]'s style.css doc -- they seem to move as if connected, a little bit; does that make it harder for me to do solely using css?

    Thanks very much for any help.

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You cannot do what you are asking about using just CSS, and you must make any changes only in a child theme. In the child theme, you'll need to make a copy of your header.php file and change the structure as explained in this thread:

    http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-theme?replies=40

    Then you'll need additional CSS changes - but for that, we'll need a link to the site.

  3. jojojovich
    Member
    Posted 2 years ago #

    Yes, my first query mentions my child theme, thanks.

    However, I managed to do everything [on the top half] with css only. However, I think I'm messing up twentytwelve's "structure" which allows header image sizes to change.

    - Do I understand that right; headers can be different sizes on different pages?

    - Is my bad css screwing up the editability of header image heights, or can I bring UP my body text using css in a way that will hold through header- and featured-image height changes?

    FYI: When I tried the header.php change alone (I removed changes to css) my nav bar disappeared.

    My link is here
    type1diabetesandme.com
    (No one responded to my query on the referred css site, though thanks for that, alchymyth (sp?)).

    If this is terrible practice (I imagine), I'll clear my css and again try the header.php change and re-ask about that here if my nav bar is still gone (have tried twice).

    Thanks so much for your help.

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Can't see your site - coming soon page :/ .

  5. jojojovich
    Member
    Posted 2 years ago #

    Sorry about that, logged in I don't see it. Should be fine now. Thanks so much.

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    First turn off your caching and minify - it makes it really hard to help with CSS - no line numbers...

    The main "tests" are how the site works on smaller devices and is the mark-up valid - right now, it has errors...

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.type1diabetesandme.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    I wouldn't recommend using CSS to do major positioning of elements - it's usually problematic on responsive sites.

    This thread tells what to move in header.php file in the child theme- http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-theme?replies=40

  7. jojojovich
    Member
    Posted 2 years ago #

    How do I turn off caching? I always have a hard time know [exactly] what to do about that? And what is "minify"?

    Thanks for checking for errors, though I don't think I see things related to the css per se, the plugin yes, and some UL and LI things that I didn't set up, just appears how I am using the text widget. I put in bullets manually, actually alt+0149, fyi.

    Also, I tried twice what that link recommended re this matter in the header.php file, and took everything but the parent theme css being called in, which is when my nav bar disappeared -- want/need me to replicate that to see why?

    *I'd love to know if the css manner of moving up the body content with the rest of my z-layer / jury-rigged positioning efforts CAN work with any other header-image-height changes? Thanks so much, again.

  8. jojojovich
    Member
    Posted 2 years ago #

    Important correction in CAPS:
    Also, I tried twice what that link recommended re this matter in the header.php file, and took everything OUT OF THE CSS FILE but FOR the parent theme css being called in, which is when my nav bar disappeared -- want/need me to replicate that to see why?

  9. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Check on W3TC settings re: cache and minify - I'm not familiar with it.

    Yes, I would suggest changing the header.php file and posting a link to the page AND posting the code from that file (be sure to use the code buttons when posting code here).

  10. jojojovich
    Member
    Posted 2 years ago #

    I'm confused being told to minify when "I'm not familiar with it".
    I'll try again re headers.php and check in later. Thanks for much help.

  11. WPyogi
    Forum Moderator
    Posted 2 years ago #

    I was trying to say that I, personally, don't know how or why minify is on your site - it needs to be OFF in order to work with CSS - it's likely part of the caching plugin - so I was suggesting you check on that. Sorry if I was not so clear on how I said that :/ .

  12. jojojovich
    Member
    Posted 2 years ago #

    Hm, I've never heard of it and looking it up, have no idea how/why it'd be on this site. Where/how did you see that this mystery thing is there? Thanks so much.

  13. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Can't see the actual site again, but it shows up on the coming soon pages as well - using View Source in Firefox - this is at the bottom of your pages:

    <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
    
     Served from: www.type1diabetesandme.com @ 2013-05-20 22:24:22 by W3 Total Cache -->

    It's a plugin - look under plugins. If you don't know how to use it, I'd suggest checking the plugin's sub-forum, as it's fairly complex from what I have heard.

    http://wordpress.org/plugins/w3-total-cache/installation/

  14. jojojovich
    Member
    Posted 2 years ago #

    Thanks. Okay, well, this time the nav bar didn't disappear, phew.

    Though I'm almost exactly where I was with css alone. I still need to z-layer move the title on top of/over the header image (oddly, tagline's z-index worked, but not the titles?).

    The page content however, is almost exactly where it was earlier, position-wise, with the page content way lower than the nav bar. What's the best way to get that moved up, too?

    Why is the header edit I made necessary here, when I still needed to move everything around using css anyway? Or, should I be moving these things around using a different/better technique?

  15. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Is there a reason you are not using that image as a background image in the header?

  16. jojojovich
    Member
    Posted 2 years ago #

    No, there is no reason but perhaps that I don't know a) why that's better, and b) how to do it if it is better [for my plans].

    I put it into the theme as the header image. I don't know whether this theme uses the image I upload into that header space as a background image, or in some other way. I would like it there at least on some pages, though likely not for all of them.

    Why do you ask about this, what are you thinking, or how can that help or not help me for what I'm trying to do?

  17. jojojovich
    Member
    Posted 2 years ago #

    Is my positioning desire a really hard problem? I didn't think it would be so hard to do this nor to find out how to do this. I find wordpress to be hard.

  18. paulwpxp
    Font hero
    Posted 2 years ago #

    How can I move my navigation bar flush to the bottom of my 960x250 header image.

    So you applied relative position to header image. The thing about relative positioning is that it doesn't take the element out from the document flow, so it is still possessing its own spot creating big white space there.

    Review on the usage of CSS positioning: relative, absolute.

    Also, your image, in this particular case, should be png transparent.

  19. jojojovich
    Member
    Posted 2 years ago #

    I have seen sites with title/tagline as text on TOP of their header image, aren't there tons of WP sites doing this too? If anyone has seen a good thread about how to do that or tut somewhere, please let me know.

    The content is now too low, exactly where it was while I was making all the moves using CSS alone, which folks here told me I could not do.

    Do I now need to also position the content using CSS? Using which styles, or do I need to make my own for this?

    I'm awkward w/ coding, obviously.

  20. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    I have seen sites with title/tagline as text on TOP of their header image, aren't there tons of WP sites doing this too?

    WordPress does not actually limit the HTML and CSS, so any layout is possible.

    Your site is not available, but from WPyogi's and Paulwpxp's responses, it sounds like you need to re-think your HTML structure instead of forcing elements into position. Positioning should come naturally in a document. Forcing positions is likely to cause layout issues in other platforms, browsers and browser versions.

  21. jojojovich
    Member
    Posted 2 years ago #

    Thanks Andrew. Site has been accessible since 13 hrs ago.

    How can you do that in wp where everything is set up using php...? I wanted to use wp to avoid coding, which I'm awkward (bad) at, then can't get past this issue. To my knowledge WP and its twentytwelve theme is doing the only "structure" set up to this site, no?

    I've touched no HTML, only CSS, then moderators here told me I need to edit header PHP, which puts me exactly where I was using only CSS for position changes.

    Yuck. How can I move my content up, is doing so really hard?

    Thanks again.

  22. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Your spacing is caused by the elements you forced up using CSS positioning; because those elements are not within the flow of the document, the document does not automatically reduce spacing as it normally would.

    I would revert all your negative positioning and start from the beginning.

  23. jojojovich
    Member
    Posted 2 years ago #

    I reverted to no CSS positioning, and the content area stays at the same spot on the page. What I'd like is:
    - How can I have header image flush to top/browser window, with
    - Site title/tagline on TOP of that,
    - Nav bar flush to bottom of header image, and
    - Content starting in a normal spot below that?

    I'm back at square one. The changes I want are obviously minor, but how do get them done seems major given my experience so far. Thanks so much for your help, Andrew. Maybe you'll just send me instructions and I can stop jury-rigging any code!
    :)

  24. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Like this http://awesomescreenshot.com/0441aseic9 ?
    Can you illustrate what you want?

  25. jojojovich
    Member
    Posted 2 years ago #

    That's exactly it. In case I change the header image ever, I'd prefer that the title+tagline can appear as text on top of the header image.

    Is that do-able, easily?
    Thanks Andrew

  26. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Sure, do you have header.php in your Child Theme?

  27. jojojovich
    Member
    Posted 2 years ago #

    Yes

  28. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Try replacing your Child Theme's header.php contents with this code http://pastebin.com/VDHzit04

    Then in your Child Theme style.css file add:

    #masthead {
     width: 1040px;
     margin: 0 auto;
     padding-bottom: 0;
    }
    
    #masthead hgroup {
     position: absolute;
    }
    
    #page {
     margin-top: 0;
    }
  29. jojojovich
    Member
    Posted 2 years ago #

    Will try, thanks Andrew. Is there some place you know of to compare code so I can know/learn what you're changing re the php?

  30. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Try a service like http://diffchecker.com

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.