Venture Theme - Add Text Above Search and Cart Icons

[guyv]

Hi All!

Please can someone assist me.

I would like to add text above the search and cart icons on the Venture theme homepage (see screenshot below).

Thanks in advance!

www.electricrideco.com

[suyash1]

@guyv - it will need code editing, do you know how to edit html/liquid?

[guyv]

@suyash1

Hi! Yes, if you provide the code then I can copy and paste it.

[lemondev]

@guyv Hello,
We would need more info on the code, as it will be easier to locate the correct div. But if you want to try it, then follow this:

• Into your header.liquid try to search for “id=“SiteNavSearchCart”” and above this div apply this code:

+1 888 897 0774

This is the fast solution, so once you have more details on the code or provide with additional settings, you can adjust it better.

Hope it helps.

[lemondev]

@guyv Hello,
We would need more info on the code, as it will be easier to locate the correct div. But if you want to try it, then follow this:

• Into your header.liquid try to search for “id=“SiteNavSearchCart”” and above this div apply this code:

+1 888 897 0774

This is the fast solution, so once you have more details on the code or provide with additional settings, you can adjust it better.

Hope it helps.

[guyv]

@lemondev

Thanks a lot for your reply!

I’ve added your code (see screenshot below). Please can you assist with the following adjustments:

1. I would like to align the phone number with my logo on the left (see screenshot below).

2. I would like to adjust the margin between the phone number and the search and cart icons below it.

I have inserted some of the code from my header.liquid below the screenshot. Let me know if you require any additional code.

Thanks again for your help.

      #### +1 888 897 0774
        
          

[suyash1]

@guyv - I think you changed everything to add announcement bar on top

[lemondev]

Hello @guyv ,

You will need to add one more CSS code, but this time in the header. Try to apply:
.grid–table>.grid__item {
vertical-align: top;
}

As this will set the alignment on the Logo to be top position, as at the moment is it vertically centred.

And now for the margin:

+1 888 897 0774

That would be the adjustment.

[guyv]

@lemondev

Thanks for the adjustments!

I have also added the following code to adjust the margin between the search and cart icons and the “Account” text below it:

.site-header__search-cart-wrapper {
  margin-bottom: -10px
}

Now my issue is the mobile view which looks like this:

On my live site it currently looks like this:

I would like the mobile version to look the same as it does on my live site if possible, i.e. with no phone number on the right hand side.

Is there a way to make all the changes apply only to desktop view and not mobile view?

Thanks for your help!

[lemondev]

Hello @guyv ,
I am glad it worked out.
In order to hide it for the mobile just apply this change where i added the class ‘small–hide’ to the heading of the phone number like this:

+1 888 897 0774

That should to the trick.
Happy to help.

[guyv]

@lemondev

Great! It’s almost perfect.

Now that we changed the logo to “vertical-align: top”, it is slightly too high in mobile view (see screenshot below). Is there code we can use to make the logo “vertical-align: center” in mobile view only?

Here is the CSS that I currently have:

.grid--table>.grid__item {
vertical-align: top;
}

.site-header__search-cart-wrapper {
  margin-bottom: -40px
}

h3.tel-number {
  font-family: "unica one", sans-serif;
  color: #ffffff;
  margin-bottom: 0px;
}

I removed the class “color-white”. Is that okay?

Thanks!

[lemondev]

Hello @guyv ,
Try to use media screen on the css for the vertical align on the logo:

@media screen and (min-width:768px) {
.grid–table>.grid__item {
vertical-align: top;
}
}

You can see if you want to change the screen from 992px, but that would be from tablet to desktop.

[guyv]

@lemondev

Perfect! Thank you so much for your help. I really appreciate it.

[guyv]

@lemondev

Hi! Please can you assist with one more thing. I’ve noticed that the search and cart icons in my sticky navigation bar are vertically aligned top instead of center (see screenshot below). I believe it’s because of the code below which was applied to my header logo.

Is there a way to change the below code so that it only applies to my header logo and no other elements?

Thanks!

www.electricrideco.com

@media screen and (min-width:750px) {
.grid--table>.grid__item {
vertical-align: top;
}
}

[lemondev]

Hello @guyv ,
Sure, can you go into the header.liquid. Find the the logo, and look for his parent div class:
class=“grid__item small–one-half medium-up–two-thirds small–text-center”
and apply new class like this:
class=“grid__item small–one-half medium-up–two-thirds small–text-center logo-left”

And then change this:
@media screen and (min-width:750px) {
.logo-left { vertical-align: top; }
}

Hope it is clear.

[guyv]

@lemondev

Thanks a lot! At first it didn’t work but I added “!Important” and then it worked.