-
Posts
-
Hello Enfold Support,
This is my first time trying a site with Enfold. The last 4 or 5 sites I worked on using a rival theme, but I decided it was time to try something different and see how another theme would compare, and so far I am very happy. There are some features in Enfold that work way better, quicker and simpler, but some features that I would love to see adopted in enfold… however that’s not the point of this post. I will put requests into the ‘future features thread’.
Anyway, the point of my query – Logo resizing for iPad mini (and I presume all tablets).
I finally have the header looking the way I would like it, to suit this clients logo.
This is with transparent header (of 90px high), and resizing down to an altered logo, and changing to a solid colour.
I find the space given for logo a bit limiting, (for this particular logo), but found the resizing and ability to change logo very useful.
(I understand this resizing is done by javascript, and the amount of shrinking could be changed by editing the js?)Anyway, after a few hours searching forum, and tweaking things to get it to way I wanted it to look (using custom header height of 180px to suit ‘transparent logo), I was happy with how it looked on pc, mac book pro with firefox, safari & chrome, and on iPhone.
But… I just checked on iPad Mini (original). The solid header background comes in as it should… BUT…. the logo ‘shrink’ does not occur, the header stays at the fixed 180px height… which looks absolutely terrible.
Here are screenshots from the ipad:
https://www.dropbox.com/s/bjfva4v2096izaq/photo%201.PNG?dl=0
This is when page loads, logo looks fine, and transparent header works well.https://www.dropbox.com/s/2ywefbv935p079z/photo%202.PNG?dl=0
This is once I scroll down the page a bit. The ‘alternate logo’ appears, BUT stays at it’s original uploaded size of 180px high.So, my question:
1. Is there any way or css fix to resize the logo and header for ipad (or similar resolution tablets) once user scrolls down the page?
2.Many thanks for any help you can give me,
best regards
O.OH and I forgot to type final question…
2. Is is possible to put icons in the top bar – extra element – #top .phone-info
I want to add phone and email icons to go with the text I have added.Thanks again
Hey!
Thank you for using Enfold.
You can use this to adjust the size of the logo on iPad view:
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .mobile_slide_out .logo img { margin: 0; max-height: 80px !important; top: 2px; } }Changing the max-height will automatically adjust the width of the logo. Yes, you can add icons on the extra elements field. Generate the icon shortcode on a temporary post or page using the shortcode wand then place it on the Phone Number or small info text field.
Cheers!
IsmaelThank you Ismael for the reply.
@media only screen and (max-width: 989px)
I had to change this part to max width 1024 (as that is ipad mini resolution) for it to work.The image max height now works great, however upon ‘shrink’, the header itself remains at height of 180px (which was set in , which is set in Header Layout -> Header Custom Height (which is to accomadate the full size logo when viewing on normal screen).
On ipad, this header custom height takes up almost 1/3 of the screen, making the site unviewable (see screenshot https://www.dropbox.com/s/ty83sr3uoa69g46/photo3.PNG?dl=0 ).
Is it possible to also force the custom header height only for ipad/tablet?
I would like to keep the feature of menu appearing on transparent background when full size (with larger logo), and then scaling down to smaller logo, with menu having solid background.Icons in header:
I copied the shortcode into Header Layout -> Extra Elements -> Phone Number or Small Info Text.
However the shortcode doesnt work, and appears itself in the live site (see screenshot)
https://www.dropbox.com/s/oh6ak6f2lxeine7/Screen%20Shot%202014-09-22%20at%2009.55.11.png?dl=0thanks again for your help,
O.Hi!
Thank you for the update.
I’m testing this by resizing the browser and it looks fine under 1024px. Please try this on Quick CSS or custom.css to force the height of the header container:
@media only screen and (max-width: 1024px) #header_main .container, .main_menu ul:first-child > li a { height: 90px !important; line-height: 90px !important; } }Alright. Didn’t know it has been removed, if you want to show the icon shortcode, you can edit includes > helper-main-menu.php. Find this code on line 66:
$phone = $headerS['header_phone_active'] != "" ? $headerS['phone'] : "";Replace it with:
$phone = $headerS['header_phone_active'] != "" ? do_shortcode($headerS['phone']) : "";Best regards,
IsmaelThank you so much Ismael,
that works great.
Iniitially it didn’t, but then I did notice an error in your code. You were missing a ‘ { ‘ on the first line
@media only screen and (max-width: 1024px) #header_main .container, .main_menu ul:first-child > li a { height: 90px !important; line-height: 90px !important; } } Should be: @media only screen and (max-width: 1024px) { #header_main .container, .main_menu ul:first-child > li a { height: 90px !important; line-height: 90px !important; } }Thanks again !
- The topic ‘Header Logo doesn't resize for ipad mini’ is closed to new replies.