[outer_netParticipant]

Hello,

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!!!

[outer_netParticipant]

Sorry – http://www.waterstreetgallery.co.uk

[RupokMember]

Hi There,

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!

[outer_netParticipant]

This reply has been marked as private.

[RupokMember]

This reply has been marked as private.

[outer_netParticipant]

Hi There,

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

[Rue NelModerator]

Hello There,

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.

[outer_netParticipant]

Hi, Thanks for the code.

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

[ZeshanMember]

Hi there,

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!

[outer_netParticipant]

Hi There,

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!

[outer_netParticipant]

Just to make things a bit clearer in my last comment – Everything is fine apart form the 1st letters not being capitalised and the border below and to the left of the nav bar.

Thanks so much.

Damian

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar .desktop .x-nav li:first-child a {
  border: none;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  border-left: 1px solid #ff8322;
}
.x-navbar .desktop .x-nav li a {
  text-transform: capitalize;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
  border-bottom: 6px solid #ff8322;
}

Hope it helps.

[outer_netParticipant]

Hi ,

That only seems to place an orange border between navbar headings.

Thanks

[John EzraMember]

Hi there,

Thanks for updating the thread! Upon checking on our end, the CSS give orange side borders, the accent is below the menu items and the text have capital first letters. Did we misunderstand what you wanted? If you are not getting the same results when entering in the customizer, you may have a syntax error preventing code below from working. Would you mind entering the CSS above all the CSS in the customizer and see if it works. If not, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[outer_netParticipant]

This reply has been marked as private.

[Author]

Posts