No announcement yet.

Hook between header top and navbar - or how to do this?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Hook between header top and navbar - or how to do this?

    I´m currently trying to achieve a certain layout I got in mind, but at this point, I´m not sure what´s the best way to do this. The desired setting is this (see attachment):

    - Header on top with logo left and header right area for social icons or a few links
    - Full background picture area with title and text (or slider later)
    - below this navbar 1

    I started out with junioratoms skin Vertitoy because I wanted the full width rows on the homepage. My try was to create a widget area for the full background picture but the problem was the hook. The best one I found was genesis header (why are there no below/above navbar hooks?? LOL).
    The problem here is: You can´t apply a full background because that widget is in the wrapper which has got 1140px width (in that case). So to fake and show you meanwhile, I applied the picture to the body (ignore the styling, please - its just a sample). This works fine on the homepage but not on the subpages - they don´t have full width rows and a pic with a larger height shows left and right of the content, so I need the full-width picture only to be as high as the area between header and navbar 1 and always fill it.

    After all my back and forth, I´d be glad if somebody got me a hint. Maybe I´m just overlooking an obvious easier or recommended way to do this... :P

    header hook.JPG

  • #2
    What if...

    created a custom header - nav using the before header hook
    create the large picture hook box and also put in before header with a higher priority

    only put the large picture on the home page

    just an idea...


    • #3
      created a custom header - nav using the before header hook
      Which would mean I´d have to re-create the whole logo + right-area thing to move it to another place if I get you right?

      only put the large picture on the home page
      That´s what I planned - or maybe use a version with a lowered height on subpages.


      • #4
        Is this what you're after Siga?


        • #5
          Hi, hermie! Thanks for the link, this code should give me a startout for the div, but from what I read here:
          "You can use this code to display your image in any hook position on any or all pages, posts and archive pages."....
          ...the problem with the hook position will remain it seems...


          • #6
            Maybe this can help, or maybe not. It is fixed with a fluid header, and an "after-header" widget area. The widget area has a fluid wrap, so you could apply a background to it.



            • #7
              This looks like exactly what I was after - I´ll digg it on DesktopServer and let you know! Thanks so much for this, you just made my day!


              • SiGa
                SiGa commented
                Editing a comment
                Just PERFECT! Also tried the combination with the rows from Vertitoy and this seems to work out great...
                Many thanks for your help and inspiration - your code-samples help me a lot to improve my knowledge!