Return to previous page

Edit TOP BAR - by Styrman - on WordPress WooCommerce support

This topic has 14 replies, 3 voices, and was last updated 8 years, 7 months ago ago by Eva Kemp

Styrman

Participant

April 11, 2016 at 14:35

Hello,
we bought the Royal Theme.

Now we have a question: how can we create the top bar (as you have it on this page)? We just found our where we can switch it on – not where we can customize it.

Could you please help us?

Best regards and thank you very much
Nicolas Bartschat

#120746 Copied

13 Answers

Robert Hall

Support staff

April 11, 2016 at 14:51

Hello,

This question is a bit unclear for us. Could you please clarify us with more details?
Maybe provide screenshot for our better understanding and highlight what exactly you want.

Also please provide us with link to the page and wp-admin access in Private Content.

Regards,
Robert Hall

#120749 Copied

Styrman

Participant

April 11, 2016 at 14:55

Hello,

here you can find the link to the screenshot: http://www.directupload.net/file/d/4321/65xor3j9_jpg.htm

How/where can I customize the top bar?

Best regards and thank you
Nicolas Bartschat

#120750 Copied

Eva Kemp

Support staff

April 11, 2016 at 15:08

Hello,

You can add your content to top bar in Appearance > Widgets > Right Side top bar area, Left Side top bar area.

Regards,
Eva Kemp.

#120753 Copied

Styrman

Participant

April 11, 2016 at 15:25

Could you please have a look on our page? I have attached the login data in the private content field below.

1. Is it possible to make the color of the header (type 2) and top bar in black?

2. Is it possible to reduce the distance between top bar and header? (remove the gap between top bar and header).

Best regards and thank you very much
Nicolas Bartschat

Please, contact administrator
for this information.

#120755 Copied
Eva Kemp

Support staff

April 11, 2016 at 15:42
Hello,

1. Add this code in Theme Options > Custom CSS > Global Custom CSS:
```
.header-type-2.slider-overlap {
  background-color: black;
}
```
2. Use this code in Global Custom CSS:
```
.navbar {
   padding-top: 0px;
}
```
Regards,
Eva Kemp.
#120759 Copied
Styrman

Participant

April 11, 2016 at 15:47

Thank you for your reply.
Unfortunately it is not working.

We added it in custom css as following:

.header-type-2.slider-overlap {
background-color: black;
}

/*Abstand Top Bar zu Header*/
.navbar {
padding-top: 0px;
}

Best regards and thank you

#120760 Copied

Eva Kemp

Support staff

April 11, 2016 at 16:06

Hello,

You added one odd } in Custom CSS which caused the issue.
I’ve removed it.
Please check your site now.

Regards,
Eva Kemp.

#120764 Copied

Styrman

Participant

April 11, 2016 at 16:12

Hello,

– The background color should be transparent.
– The font color should be black (header and top bar –> instead of white).

Best regards and thank you very much
Nicolas Bartschat

#120765 Copied
Eva Kemp

Support staff

April 11, 2016 at 19:39
Hello,

I’ve added this code in Global Custom CSS:
```
.home .header-type-2.slider-overlap .header .menu > li > a, .home .header-type-2.slider-overlap .top-bar a {
    color: #000 !important;
}
```
and removed this one:
```
.header-type-2.slider-overlap {
  background-color: black;
}
```
Please check header now.

Regards,
Eva Kemp.
#120780 Copied
Styrman

Participant

April 13, 2016 at 12:45

Thank you Eva, that worked out well 🙂

You have to help us out once more 🙂

What exactly is the effect of “Enable Responsive Design” in the Theme options?

The content of our homepage mostly does not fit on mobile devices, for instance the revolution slider on the main page does not fit in width.
Are pictures shown in different resolutions if responsive design is enabled?

Thank you!

#120994 Copied
Eva Kemp

Support staff

April 13, 2016 at 15:44
Hello,

For slider try to use “Auto” option in the settings:
http://storage9.static.itmages.com/i/16/0413/h_1460558221_8267375_164905a32e.png
or use custom sizes for mobile:
http://storage6.static.itmages.com/i/16/0413/h_1460558275_3891371_cfae245e86.png

Also use this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.upb_row_bg {
   width: 100% !important;
}
.vc_custom_1459198269987, .vc_custom_1459198808087, .vc_custom_1459199541649 {
    margin-left: -100px;
    margin-right: -100px;
}
```
The issue is caused because you added padding values for some elements in VC editor and they are also applied for mobile view.

Regards,
Eva Kemp.
#121034 Copied
Styrman

Participant

April 14, 2016 at 15:59

Thank you!

#121293 Copied

Eva Kemp

Support staff

April 14, 2016 at 16:02

Hello,

You’re welcome.

Regards,
Eva Kemp.

#121295 Copied
Tagged: customize top bar, edit top bar, seo friendly meta keywords, top bar customization, woocommerce wordpress themes, wordpress top bar
Viewing 14 results - 1 through 14 (of 14 total)