-
Posts
-
Hello,
I’m trying to create an image-based header element that essentially functions as a full width responsive banner image with the logo in its center and the menu layered on top of it to one side of the centered logo. I have gotten it to work almost perfectly in Firefox. See http://jk.voiceraiser.com/ So far I am achieving this by uploading a very wide logo image and by using some quick css changes that I have pasted at the bottom of this ticket.Where I need support is regarding all browsers other than Firefox. In Chrome and Safari, and possibly in IE as well, the wide image header element only displays at a very small size up at the very top of the header area. Can you please tell me how I can make the header appear on all browsers in the same way that it now appears on Firefox? Thanks!
Here is my quick css related to this issue:
.logo {
left: 50% !important;
transform: translate(-50%);
}@media only screen and (max-width: 767px) {
.responsive .logo img {
left: 11% !important;
display: block;
height: auto !important;
max-height: 200px!important;
max-width: 100%;
width: auto;
}#top #main .avia-section .template-page {
margin-top: 40px!important; }
#header_main { height: 120px; }
#advanced_menu_toggle { top: 45%; }
}Thanks so much!
Hey spencemann!
Thank you for using Enfold.
Please add this in the Quick CSS field:
.logo, .logo a, .logo img { width: 2225px; max-width: 2225px; padding: 0; min-height: 250px; }Best regards,
IsmaelThanks Ismael, that definitely improved things. However I’m still having some display issues.
If I use the CSS you suggested then the header logo image is not centered and appears off on the right-hand side. However the header logo image does appear the correct size and it appears on Chrome, Safari, and IE as well as Firefox.
If I use the CSS below (including the left: 50% !important; transform: translate(-50%);} then the logo header image displays the correct size and correct alignment on Firefox, Chrome, and IE, however it disappears completely on Safari.
.logo, .logo a, .logo img {
left: 50% !important;
transform: translate(-50%);
width: 2225px;
max-width: 2225px;
padding: 0;
min-height: 250px;
}The other issue is that this CSS change leads to the logo header image no longer displaying correctly on mobile. I would like it to display as in this screen cap
Thanks!
I also have an additional question regarding the header layout (let me know if I should start a new ticket for this). What I am trying to do is to effectively create one menu, or two menus so that navigation links appear in the header on both sides of the central logo. I can get it working pretty well by simply repositioning the secondary menu in header meta to function as a sort of left-hand main menu. However this does not work well for mobile devices because only the main menu is converted into a mobile menu while the secondary menu is not. This makes me think that it may be better to implement a single menu with half the menu items floating left and half floating right, rather than using the primary and secondary menus. Any suggestions for how to get 50% of the menu items to float right and 50% to float left?
Thanks again!
Hey!
Please add this for mobile devices:
@media only screen and (max-width: 767px) { .responsive .logo img { left: 46% !important; display: block; height: 250px !important; max-height: 200px!important; max-width: 2225px; width: 2225px; } .responsive #top .logo { position: absolute; } #advanced_menu_toggle { top: 120px; } }Regarding the other questions, we kindly ask you to open a new thread. Thank you.
Regards,
IsmaelHello again,
This project was on ice but has been revived again and I’m still trying to figure out the last tweaks to the mobile display of the logo / header.
Everything is working properly except that the left side of the logo is being cut off. It looks like some kind of margin is being inherited that is causing the left side to align with the margin of the content on the page below.
See photo:
I would like to remove that margin so that that the image is full width.
Thanks so much!
Hi,
use this code:
@media only screen and (max-width: 767px) { .logo, .logo a, .logo img { margin-left: -28px !important; }}Best regards,
AndyHello,
Thanks Andy that did the trick, however with further testing I’m now discovering that on some versions of Safari on iOS 6 on an iphone and iOS 8.3 on an ipad air the logo graphic is not displaying at all. I know that on iOS 9 everything displayed correctly, and I was only able to test these 2 past versions of iOS, I suspect that other versions may be impacted as well.
Here are some screen captures:
Thanks again for your help!
Hi,
there is no reason for me why a logo shouldn’t display on those devices. But maybe they are simply too old to get supported anymore. However, please try to clear browser cache on those devices and then reload a few times.
Best regards,
AndyHello,
I have been able to complete more extensive browser testing on IOS devices and still have a number of issues that I would appreciate some support on thanks!
The issue withe the logo not displaying on IPADs is consistently present for IPADS running anything earlier than 9.0 I’m not sure how far back you guarantee compatibility for IOS, if before IOS 9 is not compatible with the theme then I will let that go, but if you can offer support for that issue that would be great.
In IOS9 there’s another issue on one of color sections not displaying correctly on this page: http://jk.voiceraiser.com/monuments/
Can you provide guidance on how to best resolve this? Thanks!And finally in all versions of IOS and safari on IPADs the mobile menu is displaying two middle menu items that are hidden on all other mobile devices and browsers in the screenshot below you will see them appear as menu items 3 and 4 titled “menu item” and “menu item”. How can I hide these menu items on IOS?
Thanks so much for your help!
Hi,
we can’t help with the logo. Please update your iOS to the newest version.
Use this code inside Quick CSS field:
@media only screen and (max-width: 989px) and (min-width: 768px) { #menu-item-464, #menu-item-652 { display: none; }}In the future please use different tickets for different questions or issues.
Best regards,
Andy
- You must be logged in to reply to this topic.