What I’m trying to do:
I am trying to add a logo image to the left navbar of the standard html of the material design theme. The image should be in the menu and stick to the bottom of the page.
What I’ve tried and what’s not working:
Well I am able to add the image to the navbar with the designer right below the last link item. But I cannot figure out how to move it to the bottom.
In other words: the logo image in the picture should go to the lower end of the menu bar instead of appearing right below the last link.
Thanks for any idea!
The navbar is sized to fit its contents, so the image is at its bottom. Its bottom just doesn’t reach down as far as the bottom of the page.
It looks like you want the image to be tied to the bottom of the displayed page, whether the navbar reaches down that far or not.
Thanks a lot for your answer! Exactly: there is more room since the page has more room (as you can see in the picture below). So I want the logo to stick in the white area at the bottom…
Any idea how this can be done?
I’m sure this has come up in this forum before, I just don’t remember exactly where.
This would be a good time for you to get familiar with Forum Search, if you’re not already.
This is almost certainly going to be done with CSS, which in Anvil would be done with an Anvil role (once you work out what CSS is needed). For the CSS itself, if you don’t find anything in the Anvil forums, do some Google searching on how to pin images to the bottom of the screen.
Thank you jshaffstall! I already played around with the CSS a lot… The logo appeared everywhere… but not at the bottom of the page/menue 
Hah! That matches my experiences with CSS.
Could you use some of the logic from here: Adding a footer - #2 ?
Thank you james.patrick! Funnily enough my app ueses the non sticky version of that footer… But nevertheless I could not get any indication how to implement the logo in the navbar.
Did you look at the CSS in the sticky footer? Pinning a panel so that it does NOT scroll out of sight - #7 by stucork
From my inexpert CSS view of things, it looks like the important bits are:
position: fixed;
left: 0;
bottom: 0;
You could work those into an Anvil role and apply it to your image and see what happens. The fixed positioning should be relative to the window.
Hey jshaffstall! That’s one big step foreward ! If I choose the logo in the right size (because now shrink to fit is not working anymore) and set left to 20, the logo sits horizontally in the middle of the menu.
At the same time it sits also at the very bottom of the page. Interestingly: if I use any other number for bottom than 0 the logo snaps back under the last link item in the menu.
If I now set the “spacing_below” property of the image component to “large” it gets a little away from the bottom.
Right now the best solution so far! Thank you very much!
1 Like
