-
AuthorPosts
-
July 13, 2014 at 12:20 am #290650
Hi there,
When I reduce the size of the window or view the site on th ipad etc. the header background gets cropped on the left hand side and when you reduce the size of the window smaller it’s gets even more messed up.
Can you have a look and le me know if you have any advice please?
This is code I’ve added in the quick css for various things:
#footer .widgettitle {
color: #E24C13;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li a {
font-size: 14px;
}/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a{ height:140px; line-height: 140px; }/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 140px; line-height: 140px; }/*header with social icons and bottom nav */
.bottom_nav_header.social_header #header_main .container{height:88px; line-height: 88px;}
.bottom_nav_header.social_header .main_menu ul:first-child > li a {
height:140px; line-height: 140px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li:first-child a {
border-left-style: solid;
border-left-width: 0px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li:first-child a {
border-right-style: solid;
border-right-width: 0px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li a {
border-right-style: solid;
border-right-width: 0px;
}.html_bottom_nav_header.html_logo_center #top #menu-item-search > a {
border-right-style: solid;
border-right-width: 0px;
}#header_main {
border-top-style: solid;
border-top-width: 0px;
z-index: 1;
}Thanks in advance.
Kevin
July 14, 2014 at 6:53 am #290882Anyone available to answer the above question?
Thanks.
K
July 14, 2014 at 11:02 am #290937Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.header_color .header_bg { background-size: contain!important; }
Cheers!
Yigit- This reply was modified 10 years, 5 months ago by Yigit.
July 14, 2014 at 12:38 pm #290987Hi there,
I’ve added it but no change I’m afraid.
What else can you suggest?
Happy to provide admin access should you wish.
Regards…
Kevin
July 14, 2014 at 12:44 pm #290993Hey!
Sorry, i used the wrong selector. I have updated the code i posted here – https://kriesi.at/support/topic/heading-being-cropped-and-dissapearing/#post-290937
Please try it nowRegards,
YigitJuly 20, 2014 at 12:51 am #293493Thanks Yigit, appreciate that,
That’s helped, it’s not 100% right though as when I reduce the browser size the image changes slightly.
Also, what’s weird is when I look at the site on an iphone there is no menu at all?
Can you suggest anything?
Thanks.
Kevin
July 21, 2014 at 10:31 am #293769Hi,
Can anyone help re. above question please?
Thanks.
Kevin
July 21, 2014 at 10:55 am #293775Hi!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) { .responsive #header_main .container { height: 160px !important; }}
Also please remove any custom CSS code you have added to customise mobile menu.
P.S.: You are currently using an older version of the theme. Version 2.9.1 is available – http://vimeo.com/67209750Best regards,
YigitJuly 21, 2014 at 11:07 am #293792Thanks Yigit,
Where can I see what’s been added in 2.9.1?
I didn’t realise I had any code in the quick CSS which affected the mobile menu – below is everything I have in there, can you tell me what I should take out please?
Thanks.
Kevin
#footer .widgettitle {
color: #E24C13;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li a {
font-size: 14px;
}/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a{ height:165px; line-height: 165px; }/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 140px; line-height: 140px; }/*header with social icons and bottom nav */
.bottom_nav_header.social_header #header_main .container{height:88px; line-height: 88px;}
.bottom_nav_header.social_header .main_menu ul:first-child > li a {
height:140px; line-height: 140px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li:first-child a {
border-left-style: solid;
border-left-width: 0px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li:first-child a {
border-right-style: solid;
border-right-width: 0px;
}.html_header_top.html_bottom_nav_header .main_menu ul:first-child > li a {
border-right-style: solid;
border-right-width: 0px;
}.html_bottom_nav_header.html_logo_center #top #menu-item-search > a {
border-right-style: solid;
border-right-width: 0px;
}#header_main {
border-top-style: solid;
border-top-width: 0px;
z-index: 1;
}.header_color .header_bg { background-size: contain!important; }
.avia_textblock strong{
color:#FC8B1C;
}
.avia_textblock a{
color:#FC8B1C;
}July 21, 2014 at 11:17 am #293795Hi Yigit,
I’ve added the code you mentioned and take out code which I think isn’t needed, which is:
/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 140px; line-height: 140px; }/*header with social icons and bottom nav */
.bottom_nav_header.social_header #header_main .container{height:88px; line-height: 88px;}
.bottom_nav_header.social_header .main_menu ul:first-child > li a {
height:140px; line-height: 140px;
}Nothing seems to have changed.
Still no menu appearing when reducing the browser window size or viewing on mobile.
Regards…
Kevin
p.s. I’ll update the theme just now also.
July 22, 2014 at 9:38 am #294240Hi Yigi,
Touching base to see if you got my message above and hope it makes sense?
I added the code you gave and updated the theme but still not working.
Sorry to be a pest but can you help further?
Thanks in advance.
Kevin
July 22, 2014 at 1:53 pm #294326Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#advanced_menu_toggle { display: block; } #advanced_menu_toggle, #advanced_menu_hide { background-color: #ffffff; color: red; border-color: #ffffff; }
Cheers!
YigitJuly 27, 2014 at 3:53 pm #296473Hi Yigit,
I appreciate all your help, however, the menu area isn’t displaying as it needs to – seems strange.
I’ll drop a note with more details and try and be clearer on what I’m trying to do – which in my head is simply that the menu displays the way it should on a desktop system and then changes to the mobile style of menu if you’re on a smartphone.
Thanks again Yigit.
Kevin
July 28, 2014 at 4:59 pm #296877Hey!
Just to be clear, as I agree I don’t think we have a good idea of what you are trying to do, you want the header image to take up the entire background of the header all the way down to mobile but also not be cropped?
Its not ideal but how you have it right now is about as close as you can get since that doesn’t really work without shrinking the available background image area to be displayed in the header.
This will help to tweak things for better visibility by adding a background on the nav menu between tablets and large destops:
@media only screen and (min-width: 769px) and (max-width: 1139px){ #header_main_alternate { background: #000; } }
I don’t know what is causing the mobile nav menu to be failing right now so for that you would need to try deactivating all active plugins, doing a quick re-install/update of the theme to make sure you are back to a working baseline.
Best regards,
Devin -
AuthorPosts
- You must be logged in to reply to this topic.