Header in different colors and portfolio image size - Support

Tagged: header, Portfolio

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
November 7, 2013 at 2:23 pm #185586

WEBIGAMI
Participant

Hi Kriesi!

Three questions:

– A client would like to have a header with a white background on the homepage and with a grey background on the other pages. Would that be possible?

– And she would like to add custom speech bubble into the header on the very right side to get in contact with clients. It’s part of her branding. Would it be possible to integrate this graphical element into the header?

– She would like to have the size of the 4 columns portfolio images even smaller. Can I do that?

Thank you so much!

Jan :)

November 7, 2013 at 4:28 pm #185685
Yigit
Keymaster
Hey jansthh!

1) Please add following code to Quick CSS in Enfold theme options under Styling tab
```
#header_main { background-color: grey; }
.home #header_main { background-color: white; }
```
2) You can add image in header.php file.
3)You can add following code and adjust it as well
```
.no_margin.av_one_fourth { width: 22%; }
```
Regards,
Yigit
November 11, 2013 at 4:18 pm #186896

WEBIGAMI
Participant

Hey Yigit,

thanks so much for your great help. I really appreciate!

Everything worked out fine. Expect for the image in the header. Can you assist me with that one more time? Where would I add the line/the link to the uploaded image? :-/

Thank you!!

Cheers,
Jan :)

November 11, 2013 at 4:26 pm #186897

Yigit
Keymaster

Hi!

Can you post a screenshot and show how you would like it to look? If you do not mind creating a temporary admin login, i can login and do it for you. Make sure to check “Set as private reply (Only you and moderators will see the content of this post)” above Submit button

Regards,
Yigit

November 11, 2013 at 4:58 pm #186916

WEBIGAMI
Participant

Hi Yigit,

as it is only a draft for the client, it’s fine with me for now. I only need to know, that it would work. I will get back to you, if the client accepts the offer, okay?

Thank you so much!!! That’s an awesome support. I hope to build a lot more website with ENFOLD and through that buy it a lot more, too! ;)

Cheers,
Jan

November 11, 2013 at 5:00 pm #186917

Yigit
Keymaster

Hi!

Sure, I am keeping this thread open :)

Best regards,
Yigit

November 11, 2013 at 5:24 pm #186927

WEBIGAMI
Participant

Thank you! :)

One more thing: Can I tell the header to put the logo always above the menu? The client’s log is big and wide and she wants the nav-menu below it.

Cheers,
Jan`

November 11, 2013 at 5:42 pm #186929

Yigit
Keymaster

Hi!

It should be possible but please post a screenshot first :)

Cheers!
Yigit

November 11, 2013 at 5:57 pm #186932

WEBIGAMI
Participant

This reply has been marked as private.

November 11, 2013 at 5:59 pm #186933

WEBIGAMI
Participant

November 12, 2013 at 2:03 am #187060
Ismael
Moderator
Hey!

You can add this on your custom.css or Quick CSS:
```
div .logo {
position: relative;
}

.main_menu {
clear: both;
position: relative;
}
```
Cheers!
Ismael
November 12, 2013 at 4:50 pm #187345

WEBIGAMI
Participant

Hey Ismael,

thank you. But when I insert that kinda code, it’ll go over the content:

November 12, 2013 at 11:58 pm #187555

Ismael
Moderator

Hey!

Can you please post a link to the website? Do you have a fixed or a non-fixed header? Please check on Enfold > Header > Header Type.

Cheers!
Ismael

November 26, 2013 at 11:59 am #193366

WEBIGAMI
Participant

Hello everybody,

I’m on that client again now and still have the following issues:

HEADER:

– I’m using a non-fixed-header. The logo should be above the header. With the CSS code you gave me, there is way too much space between the logo, the nav-menu items and the content below. And there is a separator between the logo and the nav-menu (please see the current site)
– the highlighted menu item (e.g. “angebot” when selected) should come in orange. The other menu items should stay grey
– I would like to remove the colored small line under the selected menu item
– I would like to add a small image to the header. It should be aligned right and linked to the contact (“kontakt”) page

FONT:

– The font style is too strong for the client’s taste. I tried to reduce it from 600 down to 500. But it appears to be only strong or not. Any other possibility?
– I’d like to have two different font sizes in one line. How would I do that? E.g. “profile | SKCC” -> “profile” should come in 16px and “SKCC” in 30px
– I’d like to highlight text with a specific color. Is it possible?

LINKS:

– can I remove the animated enfold arrow which appears when I mouse over a linked image

The temporary website:
http://webigami.de/skcc

I really appreciate your help! Thak you all so much!!!! :)

Cheers,
Jan

November 27, 2013 at 10:53 pm #194091
Yigit
Keymaster
Hey!

Header
1) Can you post a screenshot and show how you would like logo to be? And currently, i see no seperator between logo and menu
2) Please add following code to Quick CSS to make active menu item orange
```
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: orange; }
```
3)
```
.current-menu-item>a>.avia-menu-fx { display: none; }
```
4) In WordPress dashboard, please go to Appearance > Editor and open Header.php file and find
```
do_action('ava_after_main_menu');
```
And add your image after closing div tag as shown here http://i.imgur.com/DNN2fgT.jpg
Font
1) Which font exactly do you mean? You can go to Enfold theme options > Styling and change the font if you would like.
2) You can use heading tags. Please see http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers
3) You can highlight texts as shown here http://i.imgur.com/csSI7L4.jpg
Links
1)
```
.image-overlay { display: none!important; }
```
Best regards,
Yigit
November 28, 2013 at 1:50 pm #194328

WEBIGAMI
Participant

Hey Yigit!

GREAT! AWESOME! Thank you so much so far! :)

I managed to get rid of the separator and reduce the space between the logo and the nav-menu.

Just 6 more questions:

1) the logo is not properly reduced in size on the mobile page. Is it because it’s too wide anyway?
2) how can I align the new picture in the header to the very right? Now, it’s directly beside the search-button.
3) the link behind the picture in the header is not active!? I inserted the exact code you supported me with.
4) Can I also remove the orange line when one hovers over the menu items in the nav-bar?
5) I couldn’t figure out how to increase the line spacing in a text. I want to have white space between the highlighted text lines. And the background color only should be streched from the very left to the very right. I would need it like in this screenshot:

6) yes, I tried to use heading tags. But he wouldn’t allow me to use tweo heading tags in one line. He will add a line break automatically. I would need it like in this screenshot:

Thank you!!

Jan :)

November 28, 2013 at 3:47 pm #194364

WEBIGAMI
Participant

PS: I managed to align the logo in the header right and the link is working. But now it’s on the very right of the screen. Can I make it align with the layout of the homepage?

December 2, 2013 at 3:45 pm #195292
Yigit
Keymaster
Hi!

Please add following codes to Quick CSS as well
1)
```
@media only screen and (max-width: 480px) {
.responsive .logo { height: 45px; }}
```
2)
```
.bok { margin-right: 50px; }
```
3) Can you elaborate? If you mean “Direkt Kontakt” button it does link to your contact page on my end
4)
```
.avia-menu-fx { display: none; }
```
5) You can add additional line breaks and you should achieve the look you want
6) You can increase font size manually as shown here http://i.imgur.com/XDCX9mF.jpg please make sure to be on text tab
Regards,
Yigit
December 2, 2013 at 7:51 pm #195433

WEBIGAMI
Participant

Hey Yigit,

amazing! Thank you so much for your help. Everything is fine now. Hope, the client will like it.

I’m alrready looking forward to be using the enfold theme again.

THANK YOU!
Cheers,
Jan :)

December 2, 2013 at 7:52 pm #195435

Yigit
Keymaster

Hi!

You are welcome! Let us know if you have any other questions or issues :)

Regards,
Yigit
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Header in different colors and portfolio image size’ is closed to new replies.