Fix a button to side of browser window

Support
#1

Hi,

I have a login page where I would like to fix the button that says ‘Learn more’ to the right side of the browser window and centered vertically.

The page is here:

https://test.glendowercapital.com/test-page/

Is this possible?

Thanks,

Graeme.

#2

Hi There,

Thanks for writing in! Try adding the following CSS rule into your Theme Options > Global CSS area.

.page-id-207 #loginbutton-anchor-button {
    float: right;
}
.page-id-207 .el20.x-section {
    padding-top: 0;
}

Hope that helps.

#3

Hi, That nearly works!

Can I fix it to the side of the browser window, rather than the edge of the central content?

So that it always s fixed halfway down the screen.

Thanks,

Graeme.

#4

Hi There,

Thanks for writing in!

Please update the CSS with this.

.page-id-207 .el20.x-section {
  position: relative;
 padding: 0px;
  z-index: 99999;
}
.page-id-207 #loginbutton-anchor-button {
   position: fixed;
    z-index: 99999;
    right: 0;
    top: 50%;
}

Let us know how this goes.

Thanks

#5

Hi,

That works perfectly, is it possible to use that on other pages too?

Thanks.

#6

Hi There,

You can change the 207 number to your other pages ID.

Example:

.my-section.x-section {
	position: relative;
	padding: 0px;
	z-index: 99999;
}
.page-id-123 #loginbutton-anchor-button {
	position: fixed;
	z-index: 99999;
	right: 0;
	top: 50%;
}

Also add my-section CSS class to your section:

Let us know how it goes!

#7

Hi,

I have updated the homepage with the above but it doesn’t seem to be working as on the other page, could you check the code for me?

Thanks,

Graeme.

#8

Hi Again,

Apologies, have fixed the layout on the homepage - is there any way to have the text on 2 lines?

Thanks,

Graeme.

#9

Hi Graeme,

To separate the words in the button, place the top word as the Primary Text then the second words as the Secondary Text. Initially, the secondary text will show smaller than the Primary text so to even them out, change the Secondary Text Format to match the primary text settings.

Hope this helps.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.