How do I add an image into the navi header?

Hello, 

I need to add a few small logos above the navigation in V7.0 (see illustration) so that they just stay there on every page, as part of that navigation header basically. Can anyone help? https://megasupplypro.com

Thank you,

Ken

This may help you, it is for Brine a 7.0 site. It will give you an idea of whats involved. 

https://www.beatrizcaraballo.com/blog/navigation-links-icons

You can design them in an image, then use this code to Website Tools > Custom CSS. Replace Pixabay with your image url.

header#header:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2024/08/05/21/19/lion-8947711_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 60%;
    height: 50px;
    background-position: right;
    margin-left: auto;
}

On 8/17/2024 at 5:23 AM, tuanphan said:

You can design them in an image, then use this code to Website Tools > Custom CSS. Replace Pixabay with your image url.

header#header:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2024/08/05/21/19/lion-8947711_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 60%;
    height: 50px;
    background-position: right;
    margin-left: auto;
}

 

Cool - this adds one image. What if I need to add 3 in a horizontal row with links?

Thank you

On 8/19/2024 at 9:46 PM, MegaKen27 said:

Cool - this adds one image. What if I need to add 3 in a horizontal row with links?

Thank you

If images with links, you will need script code.

Is this your site? 

https://megasupplypro.com/

On 8/22/2024 at 11:00 AM, tuanphan said:

If images with links, you will need script code.

Is this your site? 

https://megasupplypro.com/

Yes. How do I get that script code?

6 hours ago, tuanphan said:

First, use this code to Website Tools > Custom CSS

div.img-bar {
	display: none;
}

Next, use this code to Website Tools > Code Injection > Footer

<div class="img-bar">
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div.img-bar').insertBefore('div.header-inner');
});
</script>
<style>
header#header div.img-bar {
    display: flex !important;
    justify-content: flex-end;
}
div.img-bar a {
    margin-left: 5px;
    margin-right: 5px;
}
</style>

 

Nice! Thank you!
 

Now how do I add text to the left of those and how do I squeeze the space between those and the navigation?

@tuanphan - would it be possible to make one of these images a link? I have a client who wants an extra button on her nav bar for her store and I was thinking I could use an image for that function. Either a button/image above Whoa Zone or one on the left side of the logo ( to balance out where the Woah Zone button is on the right)

On 8/30/2024 at 10:59 PM, MegaKen27 said:

Nice! Thank you!
 

Now how do I add text to the left of those and how do I squeeze the space between those and the navigation?

#1. Text

Edit this code

<div class="img-bar">
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

to this

<div class="img-bar">
  <h3>Our Partners:</h3>
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

#2. Use this to Website Tools > Custom CSS

.header-inner {
    padding-top: 5px !important;
}

On 8/31/2024 at 2:52 AM, RAMPDigitalMedia said:

@tuanphan - would it be possible to make one of these images a link? I have a client who wants an extra button on her nav bar for her store and I was thinking I could use an image for that function. Either a button/image above Whoa Zone or one on the left side of the logo ( to balance out where the Woah Zone button is on the right)

Can you share site url? I can check easier

But I guess we can use script code to duplicate current button with new text/url

On 9/1/2024 at 7:02 AM, tuanphan said:

#1. Text

Edit this code

<div class="img-bar">
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

to this

<div class="img-bar">
  <h3>Our Partners:</h3>
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

#2. Use this to Website Tools > Custom CSS

.header-inner {
    padding-top: 5px !important;
}

 

Awesome thanks!

On 9/1/2024 at 7:02 AM, tuanphan said:

#1. Text

Edit this code

<div class="img-bar">
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

to this

<div class="img-bar">
  <h3>Our Partners:</h3>
  <a href="https://google.com"><img src="https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg" width="50px"/></a>
    <a href="https://amazon.com"><img src="https://cdn.pixabay.com/photo/2022/08/07/20/28/night-7371349_1280.jpg" width="50px"/></a>
   <a href="https://ebay.com"><img src="https://cdn.pixabay.com/photo/2023/09/05/20/37/owl-8235801_1280.jpg" width="50px"/></a>
</div>

#2. Use this to Website Tools > Custom CSS

.header-inner {
    padding-top: 5px !important;
}

 

Is there a way to make it fit on mobile? www.megasupplypro.com

Just squeezing it proportionally would work....

or if you know a better way would be great. Appreciate it

On 9/7/2024 at 8:28 AM, MegaKen27 said:

Is there a way to make it fit on mobile? www.megasupplypro.com

Just squeezing it proportionally would work....

or if you know a better way would be great. Appreciate it

Use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
header#header div.img-bar img {
    width: 50px;
}
header#header div.img-bar a, header#header div.img-bar p {
    margin: 5px;
}
}

or if you want to make them bigger, you can consider using 2 rows of logo (left me know, I will check & give extra code)

3 hours ago, tuanphan said:

Use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
header#header div.img-bar img {
    width: 50px;
}
header#header div.img-bar a, header#header div.img-bar p {
    margin: 5px;
}
}

or if you want to make them bigger, you can consider using 2 rows of logo (left me know, I will check & give extra code)

Yes please - 2 rows would make more sense. Appreciate your help.

You can use this extra CSS code

@media screen and (max-width:767px) {
header#header div.img-bar {
    flex-wrap: wrap;
}
header#header div.img-bar img {
    width: 70px !important;
}
}