Tagged: ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
  • #185586

    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 :)


    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%; }



    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!!

    Jan :)



    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



    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! ;)




    Sure, I am keeping this thread open :)

    Best regards,


    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.




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


    This reply has been marked as private.

    this is the right client draft



    You can add this on your custom.css or Quick CSS:

    div .logo {
    position: relative;
    .main_menu {
    clear: both;
    position: relative;



    Hey Ismael,

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



    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.



    Hello everybody,

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


    – 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


    – 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?


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

    The temporary website:


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




    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; }


    .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


    And add your image after closing div tag as shown here http://i.imgur.com/DNN2fgT.jpg
    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

    .image-overlay { display: none!important; }

    Best regards,


    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:
    Highlighted text

    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:
    Two headlines in one text line

    Thank you!!

    Jan :)


    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?



    Please add following codes to Quick CSS as well

    @media only screen and (max-width: 480px) {
    .responsive .logo { height: 45px; }}


    .bok { margin-right: 50px; }

    3) Can you elaborate? If you mean “Direkt Kontakt” button it does link to your contact page on my end

    .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


    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.

    Jan :)



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


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

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