Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • May 18, 2016 at 4:25 pm #634624
    Monique

    Hi there,

    I am working on my next Enfold website and run into something new again ;-). Please see below link to a screenschot of what it looks like now and what my client wants me to achieve.

    In short:

    • The logo needs to be on the left (so that is ok :-).
    • The menu needs to be under the logo, but centered (in stead of left like it is now) > see green area on the screenshot.
    • There needs to be an extra widget area in the header for an image with a link to a certain page. This image needs to be on the same level as the logo, but placed on the right, if possible as far from the right side of the screen as the logo on the left > see blue area in the screenshot. This image needs to be responsive (getting smaller when the header shrinks), but does not necessarily have to be visible on mobile.

    What I have done so far:

    1. In theme options set header to logo left, menu under.
    2. Added the code of your instructions in both functions.php and tyles.css.
    3. Read a lot of other topics about these issues, tried many things, but without any luck… :-(

    Is this the right way to go and what should I do extra to make this work?
    Is this not the right way to go, then what should I change/add?

    Thanks for your help.

    Regards,
    Monique

    May 19, 2016 at 1:12 pm #635142
    Monique

    Any help on this please?

    May 19, 2016 at 3:47 pm #635267
    Andy

    Hi,

    use this code for your menu inside of Quick CSS field: 

    .html_header_top #top .av_menu_left .main_menu {
left: 20%;
}

    and adjust as needed.

    Header widget:

    Adding a widget area to the header

    Please use different tickets for different questions.

    Best regards,
    Andy

    May 19, 2016 at 4:19 pm #635296
    Monique

    Hi Andy,

    Thanks for your reply.

    Maybe I am a little pigheaded, but to me that is all one topic. Maybe you could have suggested to use the center logo & menu and adjust css for the logo and extra widget? That makes it one issue.

    To center the menu following your suggestion is not an option. It looks ‘more or less ok’ in bigger screens, but if you look at smaller screen (below 1024px?), the menu is not centered anymore.

    For the extra widget area, like I mentioned, I already followed the instructions you are repeating here. Without success.

    Please advise.

    Regards,
    Monique

    May 19, 2016 at 5:09 pm #635324
    Andy

    Hi,

    1.) Header widget:
    don’t add it to styles.css, add it to custom.css or better to Quick CSS field inside your backend (Enfold general style settings). The instruction work for thousands of other customers, so I’m sure it will work for you as well. Make sure you followed everything correctly.

    2.) Menu:
    Then add media queries to my code to make it responsive. For more information: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

    Best regards,
    Andy

    May 19, 2016 at 5:55 pm #635370
    Monique

    Hi Andy,

    1) Perhaps I should have mentioned I am using a child theme, so I have inserted the code in functions.php and style.css of the child theme. Is that ok too?
    Is it ok that I set the theme options to logo left and menu under? Or should my starting point be logo center and menu under?

    Regards,
    Monique

    May 21, 2016 at 4:43 am #636125
    Ismael

    Hi,

    Perhaps I should have mentioned I am using a child theme, so I have inserted the code in functions.php and style.css of the child theme. Is that ok too?

    Yes, you can do that. Set the Menu and Logo Position to Logo center, menu below then add this in the Quick CSS field to align the logo to the left:

    .html_header_top.html_logo_center .logo {
    left: 0;
    transform: none;
}

    You have to remove the following code afterwards:

    .html_header_top #top .av_menu_left .main_menu {
left: 20%;
}

    Best regards,
    Ismael

    May 21, 2016 at 8:20 am #636158
    Monique

    Hi Ismael,

    Wow, I followed the instructions again including your advise and it looks much better now.

    The only question left is (see blue area in printscreen below) how to get the extra widget image placed on the right side of the screen and how to get it to shrink with the header?

    Any suggestions on that?

    Regards,
    Monique

    May 23, 2016 at 2:30 pm #636791
    Andy

    Hi,

    you can’t shrink it, as it’s not a logo. For this job you need to hire a freelance developer.
    To put it more to the left use this code:

    #text-2 {
left: 80% !important;
}

    and adjust as needed.

    Best regards,
    Andy

    May 24, 2016 at 11:42 am #637382
    Monique

    Hi Andy,

    Thanks that works fine.

    What surprises me though is that the image is being reduced in size the more I put it to the right…?

    Regards,
    Monique

    May 24, 2016 at 12:27 pm #637402
    Andy

    Hi,

    looks fine to me now:

    View post on imgur.com

    Could you fix it?

    Best regards,
    Andy

    May 24, 2016 at 12:44 pm #637409
    Monique

    Yes Andy, I can solve it, however not fully satisfactory (sorry). Something ‘strange’ happens.

    Below you can see two screen prints, one for left 80% as you suggested and one for left 70%. The image is smaller with 80% than with 70% (which is in fact the size we prefere).

    However, when using left 70%, the image (1) is not far enough to the right side of the screen and (2) sort of floats over the main menu so that some menu items (blog, contact) cannot be clicked properly.

    I will leave it now on 70% so that you can check by yourself.

    Regards,
    Monique

    May 24, 2016 at 1:21 pm #637439
    Andy

    Hi,

    add this code:

    #text-2 {
padding: 0px !important;
}

    Best regards,
    Andy

    May 24, 2016 at 2:57 pm #637501
    Monique

    Hi,

    I tried something like that before without success. I now set the whole code to 

    
#text-2 {
	left: 80% !important;
	padding: 0px !important;
}

    and the image is still smaller (too small).

    Regards,
    Monique

    May 25, 2016 at 3:40 pm #638086
    Andy

    Hi,

    you can change image width using this code:

    #text-2 a img {
width: 360px;
max-width: 360px;
}

    Best regards,
    Andy

    May 31, 2016 at 10:32 pm #641104
    Monique

    Hi Andy,

    This code helped in getting what the client wanted.

    Please flag this topic as closed.

    Thanks for all your help and best regards,
    Monique

    June 1, 2016 at 8:34 am #641297
    Rikard

    Hi Monique,

    Great, glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Extra widget area in header. logo left, menu under and centered’ is closed to new replies.