Return to previous page

Hi. How to add the image to menu plus the navigation bar colour change

This topic has 16 replies, 3 voices, and was last updated 8 years, 3 months ago ago by Jack Richardson

Malvine

Participant

December 11, 2015 at 18:59

Hello!

I have two questions related to the theme:

1. the menu with an image. I am trying to add an image to it, using the codes given in the documentaion, but it does not work. The image does not show.

I want to add an image to a third column in a menu that opens under the “Sklep” tab.

I use image-item for css class, and for the description (here I add the path to the image).

What am I missing?

2. How to change the upper navigation (the one with language codes) to dark? I chose a specific type of menu that you gives us within the theme options, but this particular one does not have the version with the dark navigation.

Thank you Martyna 🙂

Please, contact administrator
for this information.

#103958 Copied Theme version: Legenda, 2.9.2 WooCommerce version: The latest

15 Answers

Eva Kemp

Support staff

December 11, 2015 at 19:38

Hello,

1. You wrote incorrect path for image. I’ve removed [template_url] as you’ve already written full path to the image.

2. Do you wan to change background color for your main menu?
Please show on a screenshot what you want to edit.

Thank you.

Regards,
Eva Kemp.

#103966 Copied

Malvine

Participant

December 15, 2015 at 00:16

Hi Eva

Thank you for your message.
1. Thank you
what is the size of the image that should be placed there, in the menu?

2.For the header, I am attaching the screenshot. It is the header with “sign-up”, “register” and wishlist links.
http://szybkiepozycjonowanie.com/wp-content/uploads/2015/12/upper-header.jpg

3.what should the sizes of the banners be, for the home page, 9it is Legenda standard version, with home page banner going full width)

4.For the wishlist, how to add the heart instead of “add to wishlist” on the product page? ( Iam attaching the screenshot)

5. How to change the icons that are to the left from the three links in the header (sign-up, register, wishlist). I have my own icons. Screenshot attached.
http://szybkiepozycjonowanie.com/wp-content/uploads/2015/12/upper-header.jpg

6. The “register” page does not work, I looked through the theme options and Woocommerce options, but it still is the same. When a person clicks on “register” on “my account” page, it takes a person to a page where it says that the register page is not available.
http://szybkiepozycjonowanie.com/rejestracja/

7. For the hidden panel, above the headers. In the demo content I see a great looking facebook icon, with stylish “f” letter as well, chaning colour into red when hoovered. How to achieve this effect? http://szybkiepozycjonowanie.com/wp-content/uploads/2015/12/ukryty_panel_screen.jpg

Thank you for your help
Martyna

Please, contact administrator
for this information.

#104247 Copied Theme version: the latest WooCommerce version: the latest

Malvine

Participant

December 15, 2015 at 04:02

Eva

I see now, that the cart icon from the header (to the right from the icon has gone missing. There was a cart icon, showing the number of products in it, but it is gone now.
It should be like this:
The logo on the left, the search bar in the middle, and the cart icon on the right of the header space.

There is also one more problem. On our home page, http://szybkiepozycjonowanie.com/ we have got one line of products, just below the text
“SKLEP MULTITACTICAL”
the problem is with the arrows. On the demo site https://www.8theme.com/demo/legenda/
you see the first four products icons (four men), and the arrows that move the products are to the right from the images, on the white space, while on my site the arrow is on the products.

How to change it to look like on the demo store?

Thank you

#104255 Copied Theme version: the latest WooCommerce version: The latest
Eva Kemp

Support staff

December 15, 2015 at 10:36
Hello,

1. You can increase image size in menu using css class from et-col1 to et-col12.

2. To change background color use this code in custom.css file:
```
.header-type-2 .top-bar {
    background-color: #F8F8F8;
}
```
Write your color value.

How to create custom.css you can watch in this tutorial

3. Banners on our demo has original dimensions 570px × 202px.

4. Please refer to the documentation: https://www.8theme.com/demo/docs/legenda/#!/wishlist
Wishlist settings are in YIT Plugins > Wishlist.

5. Use this code in custom.css file:
```
.top-bar .wishlist-link a i:before {
    content: "url(http://url_to_your_image_icon)" !important;
}
.login-link:before {
    content: "url(http://url_to_your_image_icon)" !important;
}
.register-link:before {
    content: "url(http://url_to_your_image_icon)" !important;
}
```
6. Read how to create registration page correctly:
https://www.8theme.com/demo/docs/legenda/#!/registration_page

7. Use this code in custom.css:
```
.top-panel .button.filled\,small:hover {
    color: red;
}
```
8. Cart icon wasn’t shown because you enabled “Just Catalog” option in Theme Options > Shop. I’ve disabled it. Please check header now.

9. Use the following code in custom.css for product arrows:
```
.owl-buttons .owl-next {
     right: -60px;
}
.owl-buttons .owl-prev {
    left: -60px;
}
```
Regards,
Eva Kemp.
#104307 Copied
Malvine

Participant

December 16, 2015 at 04:51

Hey eva

Thank you for your message. It solved a few issues!
Still a few to do, and some solutions don’t work yet, maybe I have done something wrong.

1. Done, thank you
2. Done, thank you

3. Do you mean the sliders, like the one on home page? probably not, which banners?

4. This is where the problem is. I have the latest WooCommerce version, but I do not have the Wishlist part in it, when I open WooCommerce settings.

I went through the instruction in the Legenda pdf, :
“Go to WooCommerce > Settings > WishList and select “Use shortcode” for Position option.

Then check Use buttons instead of a simple anchors to display wishlist button in the form of heart.

Other settings you may adjust at your option.”

but I don’t have it in WooCommerce. Would you know how to add it?

5. the code does not work. I added it to the css file, but it gave me a line of code in the top header. http://szybkiepozycjonowanie.com/

6. Done, thank you

7. It does not work. I added the code, but it changed nothing. Should the code for the button be also specific on the static blocks page, where I created the static block for the top panel?

How to also add the tiny “f” icon to the button, just like you have on your demo page?

8. Done, thank you
9. Done, thank you

Thank you for your help
Martyna

#104465 Copied
Eva Kemp

Support staff

December 16, 2015 at 10:12
Hello,

3. I meant banners under the slider. Did you mean images in slider?

4. I wrote you that wishlist settings are in wp-admin panel > YIT Plugins > Wishlist. Please check it.

5. I’ve edited the code to this one:
```
.top-bar .wishlist-link a i:before {
  content: "\f14a" !important;  
  font-family: FontAwesome !important;  
}
.login-link:before {
    content: "\f007" !important;
    font-family: FontAwesome !important;
}
.register-link:before {
    content: "\f085" !important;
    font-family: FontAwesome !important;
}
```
and this line to header.php to load fontawesome icons:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

7. To show Facebook icon I’ve added this code in custom.css file:
```
.top-panel .button.filled\,small span::before {
    content: "\f09a";
    font-family: FontAwesome;
    padding-right: 8px;
}
```
Please check now.

Regards,
Eva Kemp.
#104510 Copied
Malvine

Participant

December 18, 2015 at 21:11

Eva

Thank you for your help, it is so helpful.

7. The buttons: it is nearly correct, but not 100% good yet.
I am looking for the button to be filled, small. Just like here:
https://www.8theme.com/demo/legenda/shortcodes/buttons/
so that it is grey, and then when a mouse hoovers over it it changes to red.

right now it is grey, and then when a person hoovers, it changes its border into red, which is not right. It should behave just like the “filled, small”.

How to change all the buttons on the page to be “filled, small, filled with grey colour, changing to red when a mouse hoovers over it.

Thank you
Best wishes, Martyna Bizdra

#105049 Copied
Eva Kemp

Support staff

December 20, 2015 at 09:50
Hello,

Please remove this code in custom.css file:
```
.top-panel .button.filled\,small:hover {
    color: red;
}
```
and add this one:
```
.button:hover {
    background-color: red;
}
```
Regards,
Eva Kemp.
#105105 Copied
Malvine

Participant

December 23, 2015 at 21:17

Thank you Eva

I will have more questions, I hope it is ok.
I read the documentation, but it does not always answer my questions.

1. How to add the parallax effect to an element? I have the options set up by the demo version for kids, there is a parallax element on the homepage.
When I add an image to the Row settings, and set the parallax effect in the row settings, nothing really happens. The image shows up, and the sentences, the buttons, but there is no parallax effect, plus the image should be darkened, like covered by a mist, the effect I can see on the demo for the Kids Toys store (demo Kids Toys).
i followed the description in the documentation, but it is not enough.

2. We have a few blog posts on our home page. How to add the same animations to them, the same animation as we have on the blog page images?
http://www.szybkiepozycjonowanie.com (the blog posts are on the bottom) http://www.szybkiepozycjonowanie.com/blog
The animations : a chain icon to the article, and two arrows icon to expand the image into a lightbox?

Thank you
Martyna

#105651 Copied

Eva Kemp

Support staff

December 24, 2015 at 10:10

Hello,

1. Please show a page where you added Parallax image.

2. The posts are added with Visual Composer editor so you need try different styles in Post Grid settings > Item Design tab.

Regards,
Eva Kemp.

#105687 Copied

Malvine

Participant

December 29, 2015 at 20:40

Thank you Eva

The parallax effect should be seen here, I test elements on this page
http://szybkiepozycjonowanie.com/elementy-testowe/

the image in the background does not move, and also, how to add this darkening affect one can see on the dem (the image is light, but parallax makes it look darker, like in the shadow)

Thanks,
Martyna

#106229 Copied

Malvine

Participant

December 30, 2015 at 02:08

Eve

I need your help with a few more things:

1. The buttons, are not yet ok. When I check the “Filled Buttons” (MEDIUM) on the demo page, they are light grey, and then turn to red when a mouse hoovers over a button. The text changes into grey. On our button, when I inserted Your code, button changes into red, but the text that should be visible on the button becomes invisible, while it should turn into grey(or white)
1. how to change the colour of the text when a mouse hoovers over the button, so that the text changes into white/grey?
https://www.8theme.com/demo/legenda/shortcodes/buttons/
on our site
http://szybkiepozycjonowanie.com/blog/

2.Revolution slider
I added in image with a resolution of 1581×440 px. for the bigger screens of resolutions over 1600×900 px, the slider has a white margin on each left and right sides of the slider. So the slider is no longer responsive, when the screen is larger than the slider image size (width).
should the image be wider, for example 1800×440, or am I missing something with the revolution slider settings?

I will be buying a new licence for the Legenda theme soon.

Thank you, Martyna

#106243 Copied
Eva Kemp

Support staff

December 30, 2015 at 09:39
Hello,

1. Parallax effect works. It moves a bit, you don’t notice it because no other content is added and there is no space to scroll down.
The darkening effect was removed in Visual Composer update.

2. Please add this code in custom.css to change hover color:
```
.read-more:hover {
    color: white;
}
```
3. As I see your original slider image sizes are 1,581px × 442px, that’s why it can’t be stretched when screen size is more. Try to use image with higher dimensions in this case.

Regards,
Eva Kemp.
#106264 Copied
Malvine

Participant

December 30, 2015 at 21:37

Eva

Thank you for your answer, the parallax really seems to work.
For the slider, adding bigger images solved the problem.

The buttons: a big problem. None of the buttons on our site seem to work properly. The code you suggested doid not help.
What we need is all the buttons on our site to work in the same fashion. (except the buttons from the top hidden panel, Facebook, Twitter buttons, they are fine) None is good.
On he demo site all looks so easy, when it comes to the buttons. We need all the buttons to be
Filled Buttons, medoum. Just like on the demo site.

http://szybkiepozycjonowanie.com/blog/

here is the demo site
https://www.8theme.com/demo/legenda/shortcodes/buttons/

Filled Button, medium

Now, I have added some code, which is unnecessary, does not help.

What should we do to have all the buttons act like on the demo Legenda site, Filled Buttons, medium?

For example on this page, for the button elements, I am using the button element, and the buttons do not change into red when a mouse hooverd over them. Should there a special class be added there?

Thank you

#106355 Copied
Jack Richardson

Support staff

January 4, 2016 at 14:34
Hello,

I’ve added this code in child style.css file:
```
.read-more:hover, .button:hover {
    color: white !important;
}
```
Please check buttons now.

Best regards,
Jack Richardson.
#106569 Copied
Tagged: add image menu, change navigation bar colour, json array, persuasive, seo friendly, woocommerce wordpress themes
Viewing 16 results - 1 through 16 (of 16 total)