Docs

[Jayd K]

Hi there,

I wondered if you could help me with an odd query? I have an old fashioned client who would like to have the address of both of his branches on either side of a stacked header. The idea is – address one is on the left hand side of the logo, and address two is on the right hand side of the logo.

I have customised headers using the top bar before, and have created a div class in the past so that I can align the text in the topbar using the custom CSS.

My question is – can I create two classes, one with each address in, and assign one as being left alinged and one being right aligned? How can I achieve this with code?

I have added the below code to the topbar, and given both divs different class names. Please let me know how I can assign one to the left and one to the right in the CSS Code area. Many thanks!

<div class="topbar_contacts">
<SPAN STYLE="color: #fffbe5; font-size: 12pt; position: relative;top: 5px;">123 Askew Road</br> Shepherds Bush, W12 9AU</br>020 8743 9444</SPAN></div>

<div class="topbar_contacts2">
<SPAN STYLE="color: #fffbe5; font-size: 12pt; position: relative;top: 5px;">63 A Heath Road</br> Hounslow, TW3 2NP</br>0208 898 1965</SPAN></div>

Website is http://www.simplysignspreview.com/barnesandhicks/
(here you can see that they are both currently aligned to the same side)

Many thanks in advance!

[Rad]

Hi there,

Thanks for posting in.

Since the first one is already on left, then all you need is to position the second one to the right. Like this,

.topbar_contacts2 {
float: right;
}

Thanks!

[Jayd K]

Hi there,

This is great, nearly there!

This has moved it to the other side, but is stepped down under the logo.
Like the left hand side, I need it higher up to match on the right hand side.

http://www.simplysignspreview.com/barnesandhicks/

Please see what the code has done back on the homepage.

Here is the code I currently have in customiser, let me know if anything needs to be changed. Many thanks!

.x-navbar .desktop .x-nav > li > a {
padding-left: 10px;
padding-right: 10px;
}

div#x-content-band-2 h4 {
    margin-top: 0;
}

.x-colophon.bottom {
   padding: 5px 0px;
}

@media only screen and (min-width: 980px) {
  .masthead.masthead-inline {
    position: relative;
  }

  .x-topbar {
    background: transparent!important;
    position: absolute;
    width: 100%;
    right: 0;
  }
}

body .x-container.offset {
    margin-top: 0;
}

.home .x-block-grid-item a {
    position: relative;
    display: inline-block;
}
.home .x-block-grid img {
    margin-bottom: 0;
}
.home .x-block-grid-item a:hover:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2); /*Change .5 to your preferred opacity*/
}

hr {
border-top: 0.5px solid #998100;
}

.x-block-grid img, .x-block-grid .x-img {
    margin-bottom: 0px;
    width: 100%;
}

.x-navbar .x-nav {
	text-align:center;
}
.x-navbar .desktop .x-nav>li {
	float:none;
	display:inline-block;
}

.topbar_contacts2 {
float: right;
}

[Jade]

Hi there,

Please add this code in the customizer:

.topbar_contacts {
    float: left;
}

Hope this helps.

[Author]

Posts