Adding Buttons to the Upper Right Corner

[Peter Roach]

Hi Bill –

I’m wondering if it would be possible to stick a couple buttons in the Upper Right corner of site. Here’s a URL of the look we are seeking: http://www.uwpc.org/

Our site is coming along nicely and I have a couple buttons working in the Upper right area, we’d like to see if we can tack them to the upper right corner and keep a good look as the browser is compressed or on a mobile device.

Thanks,
Peter

[Bill Robbins]

Hello Peter,

Are you wanting to stick the current buttons that you have in the header to the top of the site, or are you wanting to add additional buttons there? Do you want to go with how you have them styled now, or do you have something else in mind?

Bill

[Peter Roach]

I wanted to move the current buttons to the upper most corner and stack them next to each other. Kind of like the site mentioned above. Thxs

[Bill Robbins]

You can do that. Here’s how:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   #header {
   	position: relative;
   }
   
   @media only screen and (min-width: 1024px) {
   
   	#extra-content {
   		position: absolute;
   		margin: 0 !important;
   		top: 0;
   		right: 0;
   	}
   
   }
   

4. Save your changes.

Take care,
Bill

[Peter Roach]

Good Day Bill –

Here’s what we are currently running in the Custom CSS area:

@media only screen and (min-width: 768px) {

#logo {
float: left;
}

#extra-content {
margin-top: 40px;
}

}

#logo {
text-align: center;
}

#extra-content {
text-align: center;
}

#extra-content a {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}

#extra-content span.maxbutton-16-center {
margin-bottom: 10px;
}

#header {
background-image: url(http://585.ce4.myftpupload.com/wp-content/uploads/2015/11/Upper-Right-tacoma.png);
background-repeat: no-repeat;
background-position: top right;
}
#home-widgets .widget_text {
width: 630px;
padding: 0;
background: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

I tried to add in your last suggestion un-successfully. Can you format it to meet the requirements?

Thanks, PR

[Bill Robbins]

Your missing a closing bracket in your #header style, just before the media query.

[Author]

Posts