-
Posts
-
Hey belinger,
Set the Header > Menu and Logo Position settings to “Logo center, Menu below’. Add a right margin to the menu item beside the logo and move the menu container upwards with css.
Best regards,
Jordan ShannonI managed to figure out the CSS code for moving the logo in the center of the main menu from this thread: https://kriesi.at/support/topic/logo-in-center-of-main-menu/
Now I want to remove some padding and/or margin above the logo, there some unnecessary space above the logo. The logo should remain the same size, only remove some space above it.
Whats the CSS code to achieve that?
Hi,
Thanks for the feedback. Did you try to set a different size for the header under Enfold->Header->Header Size?
Best regards,
RikardYes, setting a custom pixel value in Enfold->Header->Header Size, makes the header smaller, but at the same time also makes the logo smaller.
Trying some different custom pixel values I find that ~80 px would be a good size, if the logo could remain the same size as if Enfold->Header->Header Size is set to the default value, “Large”.Hi,
Apologies, I’m not understanding your need. Are you asking to set it is the same size as the Enfold Logo?
Best regards,
Jordan ShannonI dont know what the default size of the Enfold logo is, but this is what I want to achieve
1. Position the logo in the center of the main menu = DONE
2. Remove some padding and/or margin above the logoRikard mentioned “set a different size for the header under Enfold->Header->Header Size?”
Yes, this changes the size of the header area, but at the same time it also makes the logo smaller.So what I want to achive is in step 2. Remove some padding and/or margin above the logo.
Try and change header under Enfold->Header->Header Size and you will see that the logo also gets smaller in pixel size. I ONLY want to make the header AREA smaller, not the Logo.
Hi,
Try adding this to quick css:
.inner-container{ margin-top:-50px!important; } #main.all_colors{ padding-top:108px!important; }Best regards,
Jordan ShannonHi,
Add this to quick css:
.header-scrolled.header-scrolled-full .logo{ margin-top:30px!important; }Best regards,
Jordan ShannonThanks again it worked too.
A final question..How can I remove some margin of the main menu to the left and right of the logo when it goes down to sticky header size?
I have found how to change the margin in main menu by changing the pixel size in this:#menu-item-2384 { margin-right: 150px; }But it also changes the margin when the header is not sticky (normal header size, not scrolling the page)
How can I change the margin left/right of logo only when the header is sticky header?Hi,
Try this:
.header-scrolled.header-scrolled-full #menu-item-2384{ margin-right:30px!important; } .header-scrolled.header-scrolled-full #menu-item-2398{ margin-left:30px!important; }Best regards,
Jordan ShannonAfter testing these quick css I have noticed a couple of things that needs to be fixed:
1. In normal header size, only ~50% of the top of the logo is clickable
2. In sticky header the logo is not clickable at all
3. As you start scrolling the page, just as the header are about to go down to sticky header size, the logo gets stuck and remains only 50% visible, then jumps down. There is no smooth transition.
4. The full width slider right below the header area is clipping inside the header area by ~5-10 px (a bit hard to notice at first since the slider/header is transparent)
5. In mobile, the logo is only visible by ~25% and the burger menu just barely, making in unusable.Hi,
I checked the link to the staging site and it appears the logo image is broken. Please re-upload the logo image to fix this.
The approach you started with is quite old and the theme has changed a lot since then.
Please remove the previous code and start fresh. There is a much simpler approach to achieve a centered logo, split menu please check this link http://graphitivity.com/enfold/docs/menu/#logo-center-split-menu
Best regards,
VinayThanks, this was a much better approach!
Strange about the logo, maybe it was cached on our site, I have re-uploaded it.One problem remains, the logo is still not clickable.
I also want to center the logo better, but I left the custom css as provided and try to fix that after you have looked into why the logo is not clickable.Hi,
Thank you for pointing that out, the z-index of the logo is less than the menu please add “z-index:999” to logo class and that should fix the issue.
Your code should look similar to:
#header .logo { left: 50%; transform: translateX(-50%); z-index: 999; }Best regards,
VinayIt works great! :)
So my final question, the logo was not perfectly centered. I managed to fix this my changing transform: translateX(-50%); to transform: translateX(-60%); in:#header .logo { left: 50%; transform: translateX(-60%); z-index: 999; }When the header scrolls down to sticky header size, it seems there is a new rule for centering the logo (the logo is not perfectly centered as in the normal header size).
How can I better position the logo in sticky header size? I would also like to narrow the margins to the left and right of the logo in sticky header sizeThe old fix Jordan mentione above does now work with this new approach:
.header-scrolled.header-scrolled-full #menu-item-2384{ margin-right:30px!important; } .header-scrolled.header-scrolled-full #menu-item-2398{ margin-left:30px!important; }Hi,
It appears you have taken a bit different approach to add margins to 3rd and 4th menu item. I have not tested this method.
It’s better to use the nth child rule on the 3rd menu item as it will be one menu less to adjust.
I checked your site and the logo appears centered on scrolled state of the header as well.
If you like to target the logo on a scrolled header please use the below CSS
#header.header-scrolled-full .logo { /* YOUR CSS HERE */ }Best regards,
VinayThanks again for you help.
As you scroll the page there is an ongoing transition until the header is fully down to sticky header size
I tried putting some code in /* YOUR CSS HERE */ as you mentioned above, it does work, but it creates a jump effect.
The correction of the positioning of the logo is only visible after the header is 100% sticky header sizeIf you scroll down on our staging site below in private content you will see the logo progressively shrinking in size until the header is fully sticky header, after that the logo jumps to the new position.
Is it possible to have a smooth transition?
Also what css code should I use to narrow the margins to the left and right of the logo in sticky header?Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.Best regards,
VinayI have a new question (forget about the last question above, we are not gonna use the sticky header at all)
I need to correct the margin to the left of the logo. The margin to the left is wider than the margin to the right of the logo. Its not our image as I have tried to delete the logo and use enfolds default logo, the problem remains.
I need to decrease the margin to left of the logo so the margins left/right are even, what css code should I use?
Provided screenshot in private content
Hi belinger,
Please refrain from bumping or replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.
Best regards,
VictoriaHi belinger,
Please adjust the transform value like the code below.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css@media only screen and (min-width: 780px) { #header .logo { left: 50%; transform: translateX(-66%); z-index: 999; } }If you need further assistance please let us know.
Best regards,
VictoriaThanks for the reply
This moves the logo to the left, making the whole menu and logo not perfectly centered compared to the content of the site.
I need to only remove some margins between the logo and the left side of the menu.
So instead of moving the logo to the left, the left part of the menu needs to move to the right.Provided a screenshot in private content to clarify the problem
- You must be logged in to reply to this topic.