help with fixed bottom – and link to fixed header

[Anki]

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

[scrambler]

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;}

[Anki]

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?

[scrambler]

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]

[scrambler]

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;}

[Anki]

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

But the fixed head i working fine.

[scrambler]

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

[Anki]

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?

[scrambler]

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]

[Anki]

Thank you for all help, your the best 🙂

[Author]

Posts