Home Forums Weaver X Tutorials and Hints help with fixed bottom – and link to fixed header

Topic Resolution: Resolved
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #18687
    Anki
    Participant
    Hi!
    Hope someone can help me, I want a fixed top and bottom, and I want “Header Image Links to Site”.
    I have read almost everything on the forum and I cant find what I looking for (xtreme plus).

    1. Can I have a link to the fixed header, and how do I solve it ?

    This is what I have in Advanced Option, HTML Insertion, Fixed Browser Top.

    [show_if device='desktop'][header_image]
    [extra_menu menu_name='sidor' menu_style='primary' menu_type='standard']
    [/show_if]

    and in Main Options, Fonts & Custom,
    .is-desktop #wrapper {margin-top:200px;}
    .is-desktop #wrapper {margin-bottom:100px;}

    2. I can´t find anything on what to write in the Fixed Browser Bottom,to get the footer and footer widges area to be fixed (and still be able to link to other pages) at the bottom of the site.
    Is there someone who can help me what to write in the box?

    My testsite – http://mittgarage.se/
    And my real site – http://dintrafikskola.nu (still in weaver II) soon to upgrade, I hope.
    Thank you in advansed
    #26689
    scrambler
    Moderator

    1- You can place the header image shortcode in an html link like

    <a href=”url“>[header_image]</a>

    2- The fixed browser bottom is like the top one, you place whatever content you want in the HTML insert fixed browser bottom box.

    So if using that area, you would have to recreate the footer content in there. For widgets, you could use a per page widget area (defined at the bottom of the Sidebar & Layout page), and insert that widget area using the widget area shortcode.

    If you don’t want to have to redo the content of the footer, you can fix the actual footer by adding the rule below in the Theme custom CSS rule box

    .is-desktop #colophon {position:fixed;bottom:0;}

    and replace your bottom margin rule on the wrapper by a padding one

    .is-desktop #wrapper {padding-bottom:100px;}

    #26690
    Anki
    Participant

    Thank you, from the bottom of my heart…

    I have the footer in place now. I´m so happy.
    But I´m not so familier with shortcodes, so I dont know were to put it, can you help me?
    #26691
    scrambler
    Moderator

    What shortcode are you speaking of?

    If you mean the header image, where you had it before.

    Instead of using

    [show_if device='desktop'][header_image]
    [extra_menu menu_name='sidor' menu_style='primary' menu_type='standard']
    [/show_if]

    use

    [show_if device='desktop'] <a href=”url“> [header_image] </a>
    [extra_menu menu_name='sidor' menu_style='primary' menu_type='standard']
    [/show_if]

    #26692
    scrambler
    Moderator

    You also need to remove the 50px bottom margin you have on the wrapper, and increase the padding-bottom to 200px, or else people cannot access the bottom of your page .

    .is-desktop #wrapper {padding-bottom:200px;}

    #26693
    Anki
    Participant

    I found were to put the code, but now the menu dissapeard…

    But the fixed head i working fine.
    #26694
    scrambler
    Moderator
    You are very confusing…. 🙂
    In your first post, you had everything in place in the fixed top area, and you said you had put all the shortcodes in the HTML Insertion Fixed top box, so you obviously knew where to put things.
    Right now I see both the header image (with link) and the menu in the fixed top area, so everything is good.
    If you don’t see that, make sure to clear your cache so you are sure to see your changes
    #26695
    Anki
    Participant

    Yes I know – I´m tired, tryed to learn new stuff…

    I think I get a hung of it. But theres a gap between header and menu, can I get rid of it?
    #26696
    scrambler
    Moderator
    Add the inline style (below in yellow) in the link html of the image
    [show_if device='desktop'] <a href=”url” style=”display:block;line-height:0;”> [header_image] </a>
    [extra_menu menu_name='sidor' menu_style='primary' menu_type='standard']
    [/show_if]
    #26697
    Anki
    Participant

    Thank you for all help, your the best 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.