Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 20, 2017 at 1:25 pm #749311
    transdesign_dk

    Hello there! I’m working with a client on a website (link and admin credentials in private content), and he’s opted for the main menu in the left sidebar. I would love to able to make this sidebar-menu fill 100% of the viewport height, as this layout (in always-sticky-mode) doesn’t really work responsively; at viewports with small heights the lower menu-points doesn’t show.

    Is there a way to make these elements have a fixed percentage height? So that, for example, i could have the logo-element be 40% of screen height, and then have 6 menu-elements each having 10% of screen height?

    I’ve already used following css in my childtheme to resize the width of the whole sidebar to a fixed 20%;

    @media only screen and (min-width : 1024px) {
    .html_header_sidebar .logo
    {
    position: relative;
    clear: both;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    }

    .html_header_sidebar #top #header
    {
    width: 20%;
    }
    .html_header_left #main
    {
    margin-left: 20%;
    position: relative;
    }}

    I’ve been searching around the forum for a while for a solution but haven’t been able to find one that works for me yet; if one exists and I’ve been oblivious then I’m sorry! :)

    I still enjoy the heck out of enfold, thank you for this wonderful theme!

    February 24, 2017 at 12:44 am #751130
    Nikko

    Hey Martin,

    I’m not really sure the idea would work fine since 20% is very narrow space for mobile devices, but to give you an idea regarding the height values, you can try to use vh instead of % for example you can use 40vh as height value which is 40% of the screenheight. Hope this is helpful.

    Best regards,
    Nikko

    February 24, 2017 at 1:46 pm #751382
    transdesign_dk

    Hey Nikko,

    Thank you! I’ve dealt with the 20% for mobile devices by enabling the mobile-menu at a higher width, so that the 100% height i suggested would only be relevant for desktop at a width higher than 1000 px (I updated the code since I started the topic) :)

    Could you tell me which classes/ID’s are relevant in testing of the system I’ve suggested, so that i can start fiddling around with vh-values?

    Thank you so much in advance! :)

    Best regards,
    Martin

    March 1, 2017 at 12:46 am #753358
    Nikko

    Hi,

    I think these are the ones you need to use vh:

    .html_header_sidebar .logo {}
.html_header_sidebar #header .av-main-nav > li {}

    Best regards,
    Nikko

    March 1, 2017 at 10:42 am #753592
    transdesign_dk

    Hi,
    Thank you so much! I’ve yet to test the solution on huge viewports, but on general-laptop sizes it works great! I ended up having my final left-header-css as following, for the sake of other finding this thread in the future;

    @media only screen and (min-width : 1001px) {
  .html_header_sidebar .logo {
    position: relative;
    clear: both;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    height: 25vh !important;
  }
  .html_header_sidebar #top #header {
    width: 20%;
  }
  .html_header_left #main {
    margin-left: 20%;
    position: relative;
  }
  .html_header_sidebar #header .av-main-nav > li, .av-sidebar-social-container {
    height: 11vh !important;
  }
}

    Once again, thank you. I’ll report back shortly with the huge viewports, when I’m home at my bigger monitor.

    Best regards,
    Martin

    March 2, 2017 at 10:54 am #754250
    Rikard

    Hi Martin,

    Thanks for the feedback, we’ll keep the thread open for you :-)

    Best regards,
    Rikard

    March 2, 2017 at 11:53 am #754298
    transdesign_dk

    Hi again,

    I’ve tested it at bigger resolutions, and it sort of works still. It definitely isn’t as pretty, but it’s functional – which is partly to be expected :)

    The only thing I’d like to change, is the “.av-sidebar-social-container” (a link to LinkedIn), which is a bit messed up at 1920×1080 at 24″ monitor. It still works, but the clickable area only fills the top 2/5 of the container. Would I be able to make the element fill the container area? If that makes sense.

    Link and login is in the private area of the first post in this thread :)

    Thank you again – you’re lifesavers!

    March 4, 2017 at 4:10 pm #755613
    transdesign_dk

    Hi again,

    I figured out what i described above with the following css:

    .html_header_sidebar #header .av-main-nav > li, .av-sidebar-social-container, .social_bookmarks_linkedin {
    height: 11vh !important;
  }
  .social_bookmarks_linkedin a {
    display:flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5em !important;
  }
}

    This still isn’t perfect by any means, but this works on most resolutions, and is much better then when the problem began :)

    You can mark as solved now.

    March 6, 2017 at 10:18 pm #756605
    Vinay

    Hi,

    Just to fine tune it a bit more so that the menu looks good and don’t run into each other when the height is less.
    You can hide the menu subtext based on the height and width of the screen.

    Please check https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Add the below css in the height and width that suits your design.

    
.avia-menu-subtext {
	display:none!important;
}

    Best regards,
    Vinay

    March 13, 2017 at 11:17 pm #760321
    transdesign_dk

    Sorry about the long wait for a response!

    That’s absolutely great!
    Now I’ve just got annoyed by the logo shrinking “weirdly” (not behaving responsively) when the height goes low, and the width stays the same – got any tips for some height-media queries? :)

    Also, I’ve noticed that the anchor-points for the mobile menu behaves irregular on mobile devices. It’s quite weird, as it doesn’t seem to happen when shrinking a desktop window to mobile-size; what could be the cause of this? I’ve followed the advice on another thread (can’t remember which now), and put empty color-sections in place, as the content is shown/hidden via media queries.

    Thank yo so much once again!

    March 15, 2017 at 1:16 pm #761394
    Yigit

    Hi,

    That is because of following custom CSS code you have

    @media only screen and (min-width: 1001px) { 
.html_header_sidebar .logo {
    position: relative;
    clear: both;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    height: 25vh !important;
}}

    Can you please try increasing “1001px” value?

    Best regards,
    Yigit

    March 17, 2017 at 10:28 am #762405
    transdesign_dk

    Oh, yeah! I tried fiddling around with it, but I haven’t been able to find a “sweet spot” yet, with all the values :) When i increase the 1001px value, it seems to “break” the responsiveness of the menu, at least on my macbook viewport. So until I’ve found a better solution I’ll just keep it as it is :)

    Now it’s just the mobile menu anchorpoints that’s left for me to worry about (for now) – do you have a suggestion for me to try? Or should i open an entirely new thread about it instead?

    Thank you so, so much!

    March 21, 2017 at 8:07 am #764057
    Ismael

    Hi,

    Did you keep the empty color sections in place? That should fix the anchor link issue on mobile.

    Best regards,
    Ismael

    March 23, 2017 at 4:28 pm #765541
    transdesign_dk

    Oh wow – it works! I swear it didn’t before you wrote! There’s absolutely no problem now – thank you so, so much! You can close the thread now :)

    March 24, 2017 at 6:58 am #765938
    Ismael

    Hey!

    Great! Glad that it is working. :)

    Cheers!
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.