Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 24, 2016 at 5:31 pm #588533
    Monique

    Hi guys,

    This is the first time I am using Enfold in combination with the left sidebar layout and I run into a few issues. Since you always ask for different topics I will create these. I hope you will be able to revert soonest possible, as this website needs to be launched soon…

    2) In website styling > Logo Area I used a background image that nicely covers most screen sizes. The bg image needs to scroll since there is quite a long menu. However, under a certain height of the screen (approx. 786 px) you can see a yellow bg which comes from the theme options, but which is very ugly to see (see print screen left sidebar). This is for example the case when using a screen size og 1024 x 768 px (laptop, tablet).

    It doesn’t really look nice on mobiles either, since there we see a yellow field next to the header bg image (see print screen left sidebar on mobile).

    Is there a way how we can fix the sidebar bg and scroll the content (menu) so that we don’t see the yellow bg anymore?

    Thanks & regards,
    Monique

    February 26, 2016 at 1:10 pm #589725
    Andy

    Hi Monique!

    can you provide us a link to your site showing the elements in question please? we need to be able to inspect the elements.

    Best regards,
    Andy

    February 26, 2016 at 1:34 pm #589745
    Monique

    Hi Andy,

    Sorry, it seems like I forgot to give you the details for private content > see below.

    Thanks & regards,
    Monique

    February 29, 2016 at 9:42 am #590618
    Ismael

    Hi!

    I can only see the issue when the header switch to the top. Please create a background specifically for mobile view then add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.header_color .header_bg {
    background: #ffd950 url(mobilebg.jpg) top left no-repeat scroll;
    background-size: 100% 100%;
}
}

    Adjust the image url.

    Best regards,
    Ismael

    March 17, 2016 at 5:37 pm #599796
    Monique

    Thanks Ismael!

    For the smaller screen widths (tablet, mobile) where the header is placed on top, that is a very nice solution!

    However, it does not solve the issue on bigger screen width and a height of under approx. 786px. where the header is on the left. Can you change your screen size to (for example) below 786 px height and than see what happens? See also the print screen I previously submitted.

    Looking forward to hear from you.

    Regards,
    Monique

    March 22, 2016 at 8:16 am #601736
    Ismael

    Hey!

    Did you test this on an actual device? I don’t think you will be able to see this on an actual mobile device because the theme uses standard css media queries to change the layout on mobile devices. If you want, you can force the header to switch earlier. Add this in the Quick CSS field:

    @media only screen and (max-width: 1024px) {
.responsive #top #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
}

.responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

.container #advanced_menu_toggle, #advanced_menu_hide {
    display: block;
}

.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
}

    Regards,
    Ismael

    March 22, 2016 at 12:48 pm #601834
    Monique

    Hi Ismael,

    I checked in on a tablet (landscape screen) and also on a various devices (pc, laptop) with screensizes 1024 x 768 px and 1024 x 600 px, and it shows everywhere where the screen height is under 786 px.

    I think your solution means to show the top header already for all screensizes up to and inclusive 1024 px width? However that cannot be the intention of using a left sidebar layout… Then it would be better to go for the ‘normal’ header on top. But that is not what the client wants.

    Therefore your idea is not a solution to this problem I’m afraid.

    Can we solve this issue for the left sidebar layout or not?

    Regards,
    Monique

    March 25, 2016 at 9:29 pm #603715
    Andy

    Hi!

    I checked your website on desktop and on mobile and your left sidebar looks totally fine to me now. Could you fix it? If not what is the result you want to achieve? can you provide us a mockup please?

    Otherwise feel free to open a new ticket for a new question or issue. We are happy to assist you.

    Best regards,
    Andy

    March 31, 2016 at 4:28 pm #606015
    Monique

    Hi Andy,

    I haven’t made any changes. Here the problem still exists. See below again print screen of the problem.

    To be sure I checked in various browsers, since FF sometimes seems to render the site different from the other browsers, but they all show the same issue to me for screen heights under 786 px.

    Did you check on (pc and tablet) screens with a height under 786 px?

    Regards,
    Monique

    March 31, 2016 at 6:50 pm #606110
    Andy

    Hey!

    I checked it on exactly this size and it looks totally fine to me:

    View post on imgur.com

    Please check on another computer as well. Don’t forget to clear browser cache + hard refresh a few times.

    Best regards,
    Andy

    April 1, 2016 at 12:11 pm #606623
    Monique

    Hi Andy,

    Did you scroll down?

    I double checked on other pc, laptop, iPad, and they all look like this…

    Regards,
    Monique

    April 2, 2016 at 2:49 pm #606987
    Ismael

    Hi!

    Please try this:

    .html_header_left #top #header {
    position: fixed;
}

    If it doesn’t work and if you don’t want to implement the suggestions we provided above, please contact our partner codeable: http://kriesi.at/contact/customization

    Best regards,
    Ismael

    April 4, 2016 at 5:43 pm #607769
    Monique

    Hi Ismael,

    If I do that, the menu bar doesn’t scroll at all anymore, so the last items in the menu cannot be seen nor read anymore. Therefore this is no solution.

    Regards,
    Monique

    April 5, 2016 at 11:02 am #608176
    Andy

    Hey!

    if I scroll down of course there is this yellow background. You could try to stretch your background image. If you don’t want to do that, what else do you want to achieve? I think you would need to hire a freelance developer for this job, as it would require a huge amount of time and customization of the theme.

    Regards,
    Andy

    April 5, 2016 at 5:02 pm #608384
    Monique

    Hey Andy,

    Now that you ask ;-) Is it perhaps possible that the left menu bar stops scrolling further down as soon as the bottom of the menu has been reached? Of course that should not have an influence on the main content section, because that part might be much longer than the left menu bar. Or is that too complicated?

    Regards,
    Monique

    April 6, 2016 at 9:56 am #608773
    Andy

    Hey!

    it could be possible, but would require a huge amount of time and customization of the theme. So you would need to hire a freelance developer for this job, as already said.

    Best regards,
    Andy

    April 6, 2016 at 3:43 pm #609018
    Monique

    Hi Andy,

    That is what I thought. I will talk to my client and most probably we will leave it as it is.

    Can you flag this topis as closed?

    Thanks for all your effort and help!

    Regards,
    Monique

    April 7, 2016 at 6:04 am #609334
    Rikard

    Hi Monique,

    Thanks for letting us know, I will close the topic for you.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Left sidebar layout > bg image logo area’ is closed to new replies.