Docs

[DoebankDesigns]

I have added code in my functions.php file to allow shortcodes in the top bar. I’ve added a button in the top bar, and I’ve styled it the way I want. The only thing I need now is to figure out how to align just the button to the right side of the top bar (except on mobile, where I want it centered like I have with my current CSS).

I’m using this CSS right now:

.x-topbar #billpay {
margin-left: 20px;
}

@media only screen and (max-width: 600px) {
.x-topbar #billpay{
margin-left: 0px !important;
margin-top: 5px;
}
}

I hope that all makes sense! 🙂

The site is https://clarkthompsonandpope.com/

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.x-topbar .p-info {
    width: 100%;
}
.x-topbar #billpay {
    float: right;
}

Hope that helps

Joao

[DoebankDesigns]

That works on larger screens, but I want it to remain centered on smaller screens. I tried this, but it didn’t help:

/* TOP BAR BUTTON */
.x-topbar {
    min-height: 49px !important;
}

@media only screen and (max-width: 600px) {
.x-topbar #billpay{
margin-left: 0px !important;
margin-top: 5px;
}
}

@media only screen and (min-width: 601px) {
.x-topbar .p-info {
    width: 100%;
}
.x-topbar #billpay {
    float: right;
}
}

[Joao]

Hi There,

It seems ok on my end you could update this :

@media only screen and (min-width: 601px) {
.x-topbar .p-info {
    width: 100%;
} }

to

@media only screen and (min-width: 601px) {
.x-topbar .p-info {
    width: 100%;
    backgroUnd: none;
} }

To remove the grey background…Let us know what you want to fix, please provide more deailed info and if possible a screenshot.

THanks

Joao

[DoebankDesigns]

Okay. Almost there. It works great on most screen sizes, but on a few sizes, the phone and email are trying to align to the center when they should be on the left. See screen shot. (As you can see, the logo is also not centering correctly at some sizes.)

[Joao]

Hi There,

Please add the following code to Appereance | Customizer | Custom | CSS and do the adjustments according to your wishes, I personally think the p-info looks better centered, but of course this is just a personal opinion.

@media (max-width: 600px) {
.x-navbar-fixed-left .x-brand, .x-navbar-fixed-right .x-brand {
    float: none;
}
.x-topbar .p-info {
    text-align: left;
}
}

Hope that helps

Joao

[DoebankDesigns]

Maybe I wasn’t clear. Sorry. As the screen size gets smaller, some weird stuff happens to the p-info section. See the screen cast here: https://youtu.be/vI8wr4EVpXI.

I’m trying to style that p-info section so that it works great at all screen sizes instead of having some sizes where there’s a big gap to the left or where the button squishes up against the email.

Hopefully that helps.

[Friech]

Hi There,

Thank you for the video clip, you can add this under Custom > CSS in the Customizer.

@media (max-width:  767px) {
	.x-topbar .p-info {
		background-color: transparent !important;
		text-align: left;
	}
	.x-topbar #billpay {float: right;}
}

Hope it helps, Cheers!

[DoebankDesigns]

Almost perfect. Here’s my code:

/* TOP BAR BUTTON */
.x-topbar {
    min-height: 49px !important;
}

@media only screen and (max-width: 600px) {
.x-topbar #billpay{
margin-left: 0px !important;
margin-top: 15px;
}
}

@media only screen and (min-width: 601px) {
.x-topbar .p-info {
    width: 100%;
    backgroUnd: none;
} 
.x-topbar #billpay {
    float: right;
}
}

@media (max-width:  767px) {
	.x-topbar .p-info {
		background-color: transparent !important;
		text-align: left;
	}
	.x-topbar #billpay {float: right;}
}

I still want the button centered (not right aligned) when it drops below the contact info. I’m not quite sure which piece of code to adjust or what to add to make that happen.

[Joao]

Hi There,

Please add the following code and adjust according to your wishes.

@media (max-width: 767px) {
.x-topbar #billpay {
float: none;
margin-right: 32%;
margin-bottom: 20px;
margin-top: 20px;
} }

Hope that helos

Joao

[DoebankDesigns]

Thanks! You guys have been very helpful. With some modifications I’ve got it working the way I want it.

[Rahul]

Glad to hear it!

Feel free to ask us again.

Thank you.

[Author]

Posts