Return to previous page

Header / Products / Contact Page - by jkdesign

This topic has 4 replies, 2 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

jkdesign

Participant

June 10, 2015 at 04:00

Hi there just have a few issues with my site…

1. How do I change the padding in the header?

2. How do I add social media links in the very top bar on the left? Can they be added next to the main navigation?

3. How do I make the hovering nav bar transparent or different colour? Can this have background image?

4. The wishlist link on product page has no icon & too close to price…

5. How do I remove the custom tab on product page?

6. On my contact page the top image stops halfway, need it to go all the way across…

Thank you!

#68943 Copied

3 Answers
Eva Kemp

Support staff

June 10, 2015 at 12:27
Hello,

1. Please clarify what exactly you want to change in the header.

2. You can add social media icons in the top bar using this shortcode [share] in Text widget and drag it into “Place in header top bar” area in Appearance > Widgets.

3. To change hover color of menu items add this code in custom.css file:
.main-nav .menu > li > a:hover { color: green !important}
To add background image for navigation bar use this code:
```
.header-type-3 .main-nav {
    background-image: url("http://hersbridaltest.jk-design.com.au/wp-content/themes/legenda/images/header.png") !important;
}
```
4. I’ve changed settings for Wishlist icon in YIT Plugins > Wishlist > Settings > Position > “Use Shortcode” and YIT Plugins > Wishlist > Colors > Use buttons > ticked “Use buttons instead of simple anchors.”.
Please check Wishlist icon now.

5. Go to Theme Options > Single Product Page > Custom Tab Title > remove the content.

6. Do you want that image to be as a background of Contact page?

Regards,
Eva Kemp.
#69025 Copied
jkdesign

Participant

June 11, 2015 at 01:17

Hi Eva thanks for the reply!

1. Reducing the top & bottom padding, making the bar thinner. Also how to I change the width of the logo?

2. Can the icons be place to the right of the main navigation?

3. Sorry I meant the navigation bar that appears when you scroll down the page… Also how do I change the font here?

6. No I just want it to run across the top, same as on the About page.

Cheers! 🙂

#69181 Copied
Eva Kemp

Support staff

June 11, 2015 at 14:44
Hello,

1. Try to use this code in custom.css file:
```
.header-type-3 .main-nav {
    height: 80px !important;
}
.menu-wrapper {
    margin-top: -20px !important;
}
```
To change logo width use this code in custom.css:
```
.header-type-3 .logo-with-menu img {
 width: 300px !important;
}
.header-type-3 .main-nav .menu {
    width: 890px !important;
}
```
2. Unfortunately there is no such feature. Sorry.

3. To add background image to fixed header add this code in custom.css file:
```
.fixed-header {
 background-image: url("http://hersbridaltest.jk-design.com.au/wp-content/themes/legenda/images/header.png") !important;
}
```
To change font use the code:
```
.fixed-header .menu > li > a {
    color: #BCBDC0 !important;
    font-family: Moon Flower !important;
    font-size: 24px;
    letter-spacing: 1px;
    padding: 13px 5px;
    text-transform: uppercase;
    font-weight: 400;
}
```
6. I’ve added this code in CSS block of Visual Composer:
http://storage2.static.itmages.com/i/15/0611/h_1434017990_1743798_b825f3b727.png
Please check Contact page now.

Regards,
Eva Kemp.
#69243 Copied
Tagged: best selling, contact, header, page, products, themes, woocommerce
Viewing 4 results - 1 through 4 (of 4 total)