Tagged: centered logo, header, logo
-
AuthorPosts
-
October 24, 2017 at 11:53 am #868119
Hi!
I’m trying to ceneter the logo in the header but I want the menu to be split in half. I found various solutions in this forum but none of them worked. The best I could find for now is to create, in the menu, a new custom link with an html img tag, and place the custom link in the middle of the menu .
Here is the header
here
And here is the stiky header
here
Beside the fact that the logo is not vertically centered… I’d really like the logo to resize when scrolling down and it won’t happen if I use the img tag in the menu …
Is there any solution? I linked my stite in private content.- This topic was modified 7 years ago by AugeoCoop.
October 26, 2017 at 5:33 am #869047Hey AugeoCoop,
Thank you for using Enfold.
Adjust the height and line-height of the menu items and the main menu container.
.html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a { height: 154px; line-height: 154px; } #header #header_main_alternate .container { max-height: 154px; height: 154px; }
Best regards,
IsmaelDecember 6, 2017 at 1:27 pm #885581Hi, i want to make a little change in the header.
Is it possible to have the logo shrink when i scroll down? right now is fixed on top of the screen so there is no change in the size.December 6, 2017 at 1:27 pm #885582Hi, i want to make a little change in the header.
Is it possible to have the logo shrink when i scroll down? right now is fixed on top of the screen so there is no change in the size.December 6, 2017 at 5:39 pm #885685December 7, 2017 at 10:39 am #886008Hi, the problem is that withe the modification above the shrinking logo do not work. The logo now is an item in the menu, not the real logo i uploaded in enfold.
December 8, 2017 at 3:32 pm #886513Hi AugeoCoop,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look? The shrinking header reduces the line height of the menu too, so it already does half of the job.
Best regards,
VictoriaDecember 11, 2017 at 12:58 pm #887360Hi, here it is.
- This reply was modified 6 years, 11 months ago by AugeoCoop.
December 11, 2017 at 2:57 pm #887432Hi AugeoCoop,
How did you remove the logo container?
Best regards,
VictoriaDecember 12, 2017 at 1:10 pm #887898Hi, I removed it with the custom css. Since i could not find another way of displaying the logo in the center with the rest of the menu at the sides i removed the logo and then i creted a menu item that is the image you see in the header.
.logo { display: none; }
this is the cssDecember 13, 2017 at 1:25 pm #888319Hi,
Thank you for the update. The centered logo looks good. Glad that you found a workaround.
Best regards,
IsmaelDecember 14, 2017 at 1:22 pm #888866Thank you but in this condition i can’t have the logo resize when i scroll down… Maybe is there a work around for this?
December 16, 2017 at 4:03 am #889464Hi,
Please post the login details in the private field. We’ll try to find a workaround. If the “Sticky Header” option is enabled, you can use the “.header-scrolled” selector to change any element when the page is scrolled. Example.
.header-scrolled .any-element { color: red; }
The “any-element” selector can be replaced with the menu item selector containing the logo image so that you can specify the size on scroll.
Best regards,
IsmaelMarch 12, 2018 at 11:48 pm #925797Hi,
If you add the logo as a menu item it will not inherit the feature like shrinking of the logo when the page is scrolled. Please check the link in private content for Logo Center Split menu CSS code and easy steps to perform.
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.