I’ve tried and tried to finish the customisations to the logobar and am unable to figure out the last few changes.

1 – Change the font family to Myriad pro regular
2 – Put the email address to lowercase and make the link open an email client
3 – Reduce line spacing in text
4 – Reduce overall logobar height slightly 40 px

Thanks so much

Best theme by Far!!!

Thanks for writing in!

1. I am not sure which font-family you want to change. Also make sure you have included Myriad Pro as your custom font. Note that Myriad pro is not a google font and not included on theme. You can purchase this premium font and use it through your Child Theme function. However you can define the font family for logobar area by adding the following CSS through Appearance> Customize > Custom > CSS

.x-logobar {
  font-family: Helvetica,sans-serif;
}

2. I can see it’s already an eamil link. Let’s add the code to make it lowercase –

.x-logobar h6, .x-logobar .h6 {
  text-transform: lowercase;
}

3. To decrease line height, you can add like below –

.x-logobar {
  line-height: 1.2;
}

4. I can see you have following code on your customizer –

@media (min-width: 768px)
.x-logobar {
  padding-left: 100px;
  padding-top: 30px;
}

You can decrease the padding to decrease overall height. And also by decreasing line height, it will shrink the height too.

Hope this helps.

Cheers!

I have recently updated my global settings to change the highlight color. I have the mail to link in the logo bar, only trouble is I’m not sure how to effect the logobar text color only? it wants to be white. If you hover your mouse just below the phone number at the top right, in the logobar you should see it pop up orange.

I think there are 2 opposing settings maybe?

Thanks

Damian
http://www.waterstreetgallery.co.uk

We noticed that you have placed an invalid html code in your topbar. There is no <h7> tag. Please replace your code with this instead.

<div class="lb-text">
   <h6 style="text-align:right;">
      <span style="color: #ffffff;">'<em><strong>Fragments</strong></em>' Malcolm Whittaker <br/> 4 July - 9 Aug</span><br />
      <span style="color: #ffffff;"> 01706 839714</span><br />
      <a href="mailto:info@waterstreetgallery.co.uk"><span style="color: #ffffff">info@waterstreetgallery.co.uk</span></a>
    </h6>
</div>

Please let us know how it goes.

Its done something funny to the header bar.A green line around the navbar and padding to the left of it. Also for the life of me I can’t work out how to remove Italics from the word’Fragments”

Im just hoping now its possible to align the logo centre with the text and this will then reduce the height of the logo bar slightly.

I think things might have gotten a little messy?

This is all the code I have for the logobar:

.x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: black;
}
.x-logobar {
background-color: #71a896;
}
@media (min-width: 980px) {
.x-logobar .x-logobar-inner {
overflow: hidden;
}

.x-logobar .x-brand.img {
float: left;
}

.x-logobar .lb-text {
float: right;
font-size: 1.8em;
font-weight: bold;
padding-top: 18px;
}
}
.desktop .sub-menu a {
text-transform: uppercase;
text-align:center;
}

.desktop .sub-menu {
min-width: 100px;
}
body .x-img.current-h-p {
border: 4px solid #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width:270px;
}
@media (min-width: 768px) {
.x-logobar {
padding-left: 100px;
padding-top: 10px;
padding-bottom: 5px;
}
}
.x-prompt .x-btn {
border-width: 2px;
}

.x-prompt .x-btn [class*=”x-icon-“] {
display: none;
}
.x-logobar .lb-text {
text-align: right;
padding-right: 30px;
padding-bottom: 10px;
}
.x-colophon.top .x-container.max.width {
max-width: 60%;
width: 60%
}
/* Custom Social and Button Styling */
.social-button {
float: right;
margin-top: 23px;
margin-left: 20px;
}

.social-button a {
display: inline-block;
vertical-align: middle;
}

.social-button .custom-button {
padding: 5px 10px;
background-color: #d1202f;
color: #fff;
border-bottom: 3px solid #940E19;
font-size: 16px;
font-size: 1.6rem;
}

.social-button .custom-button:hover {
background-color: #B31A27;
}

@media (max-width: 979px) {
.social-button {
display: none !important;
}
}
.social-button {
float: right;
margin-left: 0;
margin-top: 5px;
width: 200px;
}

.social-button i {
font-size: 24px;
}

.x-menu-item-woocommerce .x-icon-shopping-cart {
font-size: 14px;
}
.x-logobar h6, .x-logobar .h6 {
text-transform: lowercase;
}
.x-logobar {
line-height: 1;
}
.x-logobar {
font-family: Lato; “Book 300”
}
.x-logobar {
letter-spacing: 4px;
}

.widget_nav_menu ul li a:before {
content: “”;
}
.widget_nav_menu ul li a {
border-bottom: medium none;
box-shadow: none;
}

Thanks

Replace your HTML with following to remove the italic style from “Fragments” and margin from the heading:

<div class="lb-text">
   <h6 style="text-align:right;" class="man">
      <span style="color: #ffffff;">'<strong>Fragments</strong>' Malcolm Whittaker <br/> 4 July - 9 Aug</span><br />
      <span style="color: #ffffff;"> 01706 839714</span><br />
      <a href="mailto:info@waterstreetgallery.co.uk"><span style="color: #ffffff">info@waterstreetgallery.co.uk</span></a>
    </h6>
</div>

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

I put the new Html in to navbar.php in the global child folder and the border still won’t go away?

Re other tweak to the logo position, could you point me in the right direction which section I need to effect to change this from my last reply? ↑

Also 1st letter capitalised has gone.

Thank you so much

Damian

You guys do amazing work by the way!