Some years back I built a small site using the Magnesium theme in RW (4, I think). One thing I did back then was to pin the site logo to the upper right corner where it floats over the scrolling content below it. See here.
I accomplished that by adding CSS code to every relevant page: #pageHeader img {
position: fixed;
right: 50px;
top: 130px;
z-index: 30;
width: 200px;
height: 200px;
}
I also added a custom banner image. I edited the Magnesium theme to make the customization and saved it as my custom Mag theme. I can’t recall how I did the editing! Or wether it might help with my logo positioning.
Now I’m working on a new site and I’m hoping to use the Eclipse theme from ThemeFlood. Adding the CSS code above to any page has no effect. The site icon shows but it’s where the theme puts it by default.
How do I pin an image (the site logo) to the upper right corner of the browser window?
But be careful. Since you made your last website, popularity of tablet and smartphone devices has exploded exponentially.
You’re going to want to test this very carefully to make sure your logo image is not hiding a large proportion of the page on these devices. Especially elements like your nav bar.
For this reason, options to make logo images ‘fixed’ are seldom provided in themes nowadays.
You’ll either have to shrink the logo image much smaller than it currently is now or place your CSS code inside media breakpoints, so it only takes effect on the larger screen sizes.
That works, sort of. I can position the image but it falls behind everything except the banner, even with a high z.
Noted, and you’re probably right that I’ll end up ditching the idea. I was trying to leverage previous work to give myself options, but maybe it won’t work out.
My site is here. It’s definitely not complete content-wise but the framework is there.
The home page is where I’m tinkering with the logo.
The other pages use your default positioning, which I’m leaning towards now that I’ve placed a logo image of the right size there. And I’ve looked at the site with my phone and confirm the problems you warned of.
I could get your logo image to display over the top of the menu. However it makes clicking the menu links very difficult.
My honest feedback is that you would probably be better to discontinue having a ‘fixed’ logo image on the screen. Place it amongst the title / slogan and allow it to scroll with the rest of the page. This will resolve all the problems.
As a side note, you should also go into your settings and turn CSS Consolidation back on. That’s the reason your icons in the menu are missing. And it will help the page load even faster.
Agreed. It worked for a non-responsive site but makes no sense for a responsive one.
I’ve gone ahead and checked the box. (I don’t recall changing it, but maybe.) But I’m puzzled by your icon comment. The appearance has not changed that I can see.