Docs

[dtourcreative]

On this page: http://192.138.19.122/~stagingbeautywor/
I would like to make the top bar text move over to the right and the sign up for e-news button to be to the left of that. I have attached a screen shot of what I aiming for. Is this something you can help with?

This is the code I have in there now:

613-966-5211 <br class=”blank” />
info@beautyworksdayspa.com

<!– BEGIN: Constant Contact Email List Form Button –><div align=”center”>Sign Up for E-News</div>

[Rupok]

Hi there,

Thanks for writing in! Looks like you want the image on left as well. So you should use three different div and place image to one, sing up link to one and finally the email and phone number to one div. You can give them separate class names so that it would be easier to style them.

Hope this helps.

Cheers!

[dtourcreative]

How do I do that?

[Friech]

Hi There,

First please update your topbar content to this:

<div class="left">
	<a href="linkurl"><img src="http://192.138.19.122/~stagingbeautywor/wp-content/uploads/2017/02/BW-LOGO-FINALWHITE_HORIZ-top-menu.png" /></a>
</div>

<div class="right">
	<div class="news-letter">
		<a href="https://visitor.r20.constantcontact.com/d.jsp?llr=x59tphcab&p=oi&m=1101910371287&sit=amjpgk8cb&f=f6ec64ee-00ec-4d5b-8f97-dd748c36f43f" class="x-btn x-btn-flat topbar-btn">Sign Up for E-News</a>
	</div>
	<div class="email-call">
		<a href="mailto:info@beautyworksdayspa.com">Click to Email</a> <br />
		or Call: <a href="tel:6139665211">613-966-5211</a>
	</div>
</div>

Then add this on your custom CSS on Customizer

.x-btn.topbar-btn {
background-color: rgb(241, 238, 237);
    border: 1px solid rgb(91, 91, 91);
    color: rgb(77, 77, 78);
    display: inline-block;
    padding: 8px 10px;
    text-shadow: none;
    border-radius: 0px;
}

.email-call, .news-letter {
    display: inline-block;
    vertical-align: middle;
}

Let us know how it goes, we might need additional custom CSS to properly position the elements.

Thanks.

[dtourcreative]

Worked perfectly thank you!

[Thai]

If you need anything else please let us know.

[dtourcreative]

HI there,
The code above worked perfectly. I now want to make it so that “sign up for e-news” is hidden on mobile.

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 979px){
    .news-letter {
        display: none;
    }
}

Hope it helps 🙂

[dtourcreative]

Perfect! I got rid of the email and phone as well. I think this is the last question for this one. I want to create just a bit of space underneath the logo as it’s touching the blue bar underneath and also there is a faint outline of a box above the logo – is that something I can remove? This is all on mobile.

[Thai]

Hi There,

Please add this CSS also:

@media (max-width: 979px) {
    .x-topbar .p-info {
        border: none !important;
        padding: 3px;
    }
    .left img {
        margin-bottom: 5px;
    }
}

Let us know how it goes!

[dtourcreative]

Thank you so much!

[Thai]

You’re most welcome 🙂

[Author]

Posts