Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #23477

    Hoping this might help you guys…

    I don’t know for sure, but I think I found someone else’s site that uses this theme with a slightly bigger logo and it works properly in the ways I’m having trouble with.

    And here’s a link to his post on the forum… he asks the same questions I do, although the only answer is in regards to the slider position. But either way, it seems like he figured out the rest on his own… so it must be possible. (Purchase code hidden if logged out) -menu


    Hi tacoverde,

    When you use !important after css, it forces that css to take effect above all else. So when you added that to your header height, it forces the header to stay the same size even when scrolling down.

    Just adding a larger logo means you shouldn’t have to use any css to adjust the logo at all as the header should resize automatically. So all you really need is the:

    .fixed_header #main {
    padding-top: 120px;

    from the other site you see the same effect on, you can look at the css they used here:




    Thanks for replying :) …

    So I got rid of all the other css except the one you mentioned, and the header resized my logo to a small logo (not 116 height)…

    I’m a total beginner, so looking at the css of that other guys website is kinda crazy! I just know from searching the Enfold forum that a couple other people have asked how to make their logo bigger and they were given some custom css. The following link is for a guy who wanted his logo wider: (Purchase code hidden if logged out)(Purchase code hidden if logged out) -bigger

    And this link is a thread from the guy who owns the website I used as an example above: (Purchase code hidden if logged out) -menu

    I tried using the padding css that you mentioned and then adding the “logo size” css:

    .logo, .logo a, .logo a img {

    width: 232px;

    height: 116px;


    And what happens is that I get the size logo I want, but it drops down out of the header. However, for now I took out the “logo size” css so that you could check out how it has resized my logo to a small logo…



    Your logo is 231×116 , however it is being displayed shrunken at 155×88 (this is why the logo is fuzzy. Your options are (if size the way you see it on page now is ok with you, then you would need to use a photo editor to resize your logo to 155×88 and reupload it.

    If you want to make room and display your logo in its full size. But first here,, install this size logo , I made it 155×88 and see how it looks, it will no longer be fuzzy




    Please, por favor!!!

    I do not care about the fuzzy logo, that is not what I asked…. I’m sorry to sound frustrated, but it’s the truth. I have a fuzzy logo because my graphic designer sent me a logo that is originally 200 x 100, but it was too small! So I enlarged it, and now it is fuzzy. I will ask her to make me a non fuzzy logo in a larger size. But only once I find out (from you guys) if it is possible to have a large logo and have the site function in the 2 ways that I mentioned above (please read well before responding).

    Please, let me know how I can have a larger logo than the specified 200 x 100 and still have the header shrink as I scroll down and also to look normal (not get cut off) when in mobile view.



    Anything is possible. Can even have the logo become even larger than it initially is instead of becoming smaller. Not an expert on what’s normal, but if you want to tell me what size you will have initial logo at and what size you want it to shrink to, I can give you the code that will do it.

    strong.logo img, #header_main .container, .main_menu ul:first-child > li a {
    height: 116px !important;
    line-height: 116px !important;

    Try this. add it to your /css/custom.css or to Quick CSS located in Enfold > Layout (Theme Options) … the text area at the bottom of that page




    Ok, still not sure that you understand what I’m trying to do.

    My logo is 231 x 116, I want it to display that way (not smaller). I like how the fixed header in Enfold is designed; the logo shrinks as the reader scrolls down the page. But, when I put my larger logo in, it doesn’t do that anymore. Also, the larger logo gets cut off (you can’t see the bottom half) when it’s viewed on a mobile phone.

    … do I make sense?



    Please open up /js/avia.js and find line 767 that looks like

    el_height       = $(elements).filter(':first').height(),

    and change it to look like

    el_height       = 116,

    You also have to take out any css modifications you’ve made that sets the size of your image somewhere else.

    *make a text file where you keep track of files and line numbers that you are changing so that way you have a record for yourself of all your customizations.




    Great… where do I find /js/avia.js ?

    Sorry, I’m a beginner. I tried to look for it in WordPress under Appearance/Editor, but I couldn’t find it.


    Yes, you need to use ftp to download/update the file. Connect your ftp client to your server and navigate to wp-content/themes/enfold/js. There you’ll find avia.js. Download the file, edit it and upload it again (overwrite the old file).



    That did it, I am so happy now :)

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

The topic ‘Large Logo causes problems with fixed header and mobile view’ is closed to new replies.