Heading being cropped and dissapearing - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
July 13, 2014 at 12:20 am #290650

kashcroft
Participant

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 #290882

kashcroft
Participant

Anyone available to answer the above question?

Thanks.

K

July 14, 2014 at 11:02 am #290937
Yigit
Keymaster
Hi!

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, 4 months ago by Yigit.
July 14, 2014 at 12:38 pm #290987

kashcroft
Participant

Hi 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 #290993

Yigit
Keymaster

Hey!

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 now

Regards,
Yigit

July 20, 2014 at 12:51 am #293493

kashcroft
Participant

Thanks 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 #293769

kashcroft
Participant

Hi,

Can anyone help re. above question please?

Thanks.

Kevin

July 21, 2014 at 10:55 am #293775
Yigit
Keymaster
Hi!

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/67209750

Best regards,
Yigit
July 21, 2014 at 11:07 am #293792

kashcroft
Participant

Thanks 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 #293795

kashcroft
Participant

Hi 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 #294240

kashcroft
Participant

Hi 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 #294326
Yigit
Keymaster
Hi!

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!
Yigit
July 27, 2014 at 3:53 pm #296473

kashcroft
Participant

Hi 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 #296877
Devin
Inactive Moderator
Hey!

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
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.