-
Posts
-
Hello,
I am always very impressed with the Enfold theme you all have created.
I am migrating a site from another theme to Enfold and I want to add custom code to the header. I am using the “Logo left, Menu below” for menu and logo position and “Secondary Menu in top bar at the right” for Header Secondary Menu.
I would like to place the custom code across from the logo, right aligned. I am using a child theme and am uncertain if this should be edited in a child theme copy of header.php or elsewhere?
I should clarify that the custom code is a username and password login that directs the user to a different site. As we are migrating the site from another theme, the necessary custom code already exists.
Thanks!
Hey blueunderground!
Try this out, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.
Cheers!
ElliottHi Elliott!
Thanks, I followed the instructions and that does allow the login to be placed. Now we need to re-position it.
The login needs to be above the main menu, not below (as it is currently). What needs to be done to place the login above the main menu?
It should not be a negative margin because the current placement associates the login with the menu and it collapses (with the menu) at lower resolutions.
Thanks!
Hey!
Can you please apply the changes Elliott suggested and then let us know so we can see the positioning to provide you custom CSS code to fix it?
Regards,
YigitHey!
Changes are done. Please review your website now. Please disable shrinking header option in Enfold theme options > Header > Header Behaviour
Cheers!
YigitNice work Yigit! Thank you for doing that.
Is there any way to prevent the login are from minimizing below the 990px resolution the same way the main menu does?
Hello,
I am following up on my note from Tuesday. Nice work Yigit! Thank you for doing that. Per your instructions I have disabled the shrinking header option in the Enfold theme options.
Unfortunately the login element we have added disappears when the browser resolution is below the 990px. The implementation is based on Elliott’s suggestion in this thread on 5/18.
How do we to prevent the login area from disappearing when the browser resolution minimizes the login element below the 990px resolution? While the main menu minimizes (as it should) the login just disappears. Is there a way to fix this or another way to add the login element to the header so it won’t disappear?
Ultimately I would like to be able to control the break-point for how long it is visible.
Please advise
I very much appreciate your help with this!
Thanks!!!
Hi!
Use the following code:
@media only screen and (max-width: 989px) { /* Disable hiding header main container */ .responsive.html_mobile_menu_tablet #header_main_alternate{ display:block; } /* Hide menu */ .responsive.html_mobile_menu_tablet #header_main_alternate .main_menu{ display:none; } /* Restore widget top position */ #header .textwidget{ top: -0px; } } @media only screen and (max-width: 767px) { /* Make login full width */ .user-login{ max-width: 100%; } }It’s commented so you can merge it with your actual code.
Regards,
JosueHi!
That seems to be a section inside the main content, not in the header – http://a.pomf.se/zgdffy.png
Regards,
JosueHi Josue,
The overlapping issue is being caused by the addition of the widget as outlined in the post “Adding a widget area to the header” that Elliott pointed me to on May 18. Following those directions, the login element widget was placed below the main menu and given a negative top-margin to be above the menu. It is in the location, below the menu, where the widget was placed, that the problem exists.
The content being blocked is 84 pixels high, below the main menu, the height of the log-in.
I have tried changing the z-index for #header from z-index: 501; to addresses the 84 pixels of white covering the content below the main menu, without success.
If you remove the code in the widget, the problem goes away. I have tried exchanging the text widget for an image widget with an image the size of the login box and I get the same overlapping issue.
Please advise how to have the log-in header element exist without impacting the content it is overlapping below the main menu.
Thanks!
Hm, try with this:
#header{ max-height: 180px !important; } #header_main_alternate, #header_main_alternate .container { max-height: 46px !important; }Best regards,
JosueHello,
This all works very nicely, but I believe the modifications were being made to the functions.php file in the enfold theme and not in the child theme.
1. What needs to be done so that the modifications are in the child theme and not overwritten when updating Enfold, going forward?
2. And are there changes in any other files (excluding functions.php and the custom CSS) that I should keep track of?Yigit, you had logged in to make some of the modifications, so you may be the one to answer this question.
I very much appreciate the assistance with these details. Many thanks!
Hi!
You can simply move this code to functions.php file of your child theme from parent theme functions.php file and add custom CSS code to Style.css file of your child theme. As you said, only functions.php file was edited and custom CSS code was added.
Cheers!
YigitHey!
The website you posted is unaccessible:
Your access to this site has been limitedAlso, can you please create us a WordPress administrator account in the installation in question?
Best regards,
JosueHi!
I am getting “Your access to this site has been limited
Your access to this service has been temporarily limited. Please try again in a few minutes. (HTTP response code 503)
Reason: Access from your area has been temporarily limited for security reasons” as well.
I am located in Lithuania and Josue is in Peru.Best regards,
YigitHi Campbell!
I have added the code to functions.php file of your child theme and widget area is now showing up fine on my end. Please review your website now.
Regards,
YigitHi Campbell,
You seem to have a child theme and the header.php file in it. If this is the case, you need to merge the header.php file in your child theme with the fresh one from the parent theme.
Best regards,
VictoriaHi Victoria and Yigit,
Thanks for getting back to me. The header.php file is not the issue. Per your instructions, I have brought in an updated copy of the header.php file from Enfold 4.1.2 and added my Google fonts customization and the two issues we are trying to address are not resolved.
The two issues with how the site looks, moving from Enfold 4.0.7 to 4.1.2, when the site is viewed are:
- From 768 pixels wide to 989 pixels wide, the main menu in the blue bar (below the logo) disappears.
- From 768 pixels wide to 989 pixels wide, the customer login (to the right of the logo) disappears.
- (The site looks good from 767 pixels down and from 990 pixels up!)
On June 15, 2015, Yigit added code to the functions.php file of my child theme to enable the login. That is the reason this exchange is a continuation of that thread. functions.php is only 31 lines of code.
The only other file customization is in helper-main-menu.php, which changed 5 lines of code. I have issued a report of the file changes, compared to the current version used as a model at the time, Enfold Version 3.1.3 at https://www.dropbox.com/s/r6nzvpc9id7yhb5/. The changes are on pages 5 and 6 of the PDF.
Again, this works without issue at Example domain 1, using Enfold 4.0.7. The issue is upgrading to Enfold 4.1.2 and you can see the issue at Example domain 2.
Please advise.
Thanks – Campbell
- You must be logged in to reply to this topic.