Logo Bar Rearrangement

Support
#1

Hello X Team,

Here is what I’ve set up for my customer in the logo area… http://cwg.bluetroop.com/. He does not want the top bar at all and he likes the layout of this sample for the logo area (see attachment).

Can you send me some code I can use to accomplish this with X Theme (the license I’ve already purchased), I do not want to use X Pro.

Thank you in advance.

Top Navigation Design
#2

Hi There @bluetroop2 ,

Thanks for writing in! It seems that you have forgotten then attachment, so I’m not sure what you want achieve exactly. However based on your initial information, you can simply disable your Topbar by head over to X -> Theme Options -> Header -> Miscellaneous area.

To get the navigation area below your logo area, head over to X -> Theme Options -> Header -> Logo and Navigation area and select the Layout as Stacked.

Thanks!

#3

Thanks, but that only gets me part of the way there.

The arrangement he likes is shown on the sample site I noted in my secure note… https://straightforwardchb.com/. that’s what I’m going for. Please send me code for arranging the logo bar with the logo on the left side and other information on the right side as in the sample.

#4

Hello @bluetroop2,

Thanks for updating the thread. :slight_smile:

Actually the changes you are looking to make will require significant changes. First you need to take navigation out of the header area. Next, top bar will have to brought inside so that it’s placed in parallel to logo section. It will fall outside the scope of the support we can offer.

However, I can tell you the file name that you can take a look to proceed with the changes.

  1. topbar.php: /wp-content/themes/x/framework/legacy/cranium/headers/views/global/_topbar.php
  2. _navbar.php: /wp-content/themes/x/framework/legacy/cranium/headers/views/global/_navbar.php

Thanks.

#5

This issue does not seem it would be that complicated. Are there any other ideas?

#6

Hey @bluetroop2,

You can achieve that header easily with the header builder in Pro theme:

Regards!

#7

I’ve already told you I’m not using Pro. The effect I want I have achieved before on this web-site (see the logo and info area at top)… https://www.themillslawfirm.com, that’s the style of arrangement I want.

To do this, the X Team gave me this piece of global CSS…

.x-logobar {
background: url(https://www.themillslawfirm.com/wp-content/uploads/2017/02/leatherTexture2.jpg)
}

.masthead-stacked .x-brand {
float: left;
}

.header-contact {
text-align: right;
color: white;
}
.header-phone {
text-align: right;
color: #034d65;
font-size: 2em;
font-weight: bold;
}
.x-navbar .desktop .x-nav > li:last-child > a {
border-right: none;
}
.x-navbar .desktop .x-nav > li > a {
border-right: 1px solid white;
}

.header-contact + br {display: none;}

and this piece of global JavaScript…

jQuery(document).ready(function($) {
var html = ‘

Merit Tower
12222 Merit Drive, Suite 800
Dallas, TX 75251

(214) 369-7800
’;
$( html ).appendTo(’.x-logobar-inner .x-container’);
});

But this does not work on my new site.
Can you help me modify the code so it will work?

#8

Nevermind, I got it… http://cwg.bluetroop.com/

#9

Glad it’s working now, cheers!

#10

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