Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #620798

    Hi There,

    Two questions:

    -Is there anyway that i can achieve those objects underneath “onze kernwaarden” in the design? The list items with the background colors
    -How can a position the logo lower on bigger resolutions?

    Hope you can help!

    Kind regards
    Folkert van der Wei

    #620852

    Hey fvdwei!

    This can be achieved by using custom css once you have the page up please share the link and we can provide you with basic css to achieve this list style.

    It’s not clear what you need to do with the logo please share a mockup and upload to imgur.com or dropbox so we can help you better.

    Cheers!
    Vinay

    #620881

    Hi there Vinay,

    Thanks for your quick response. Please check the site in the private content below.

    The thing with the logo is this: on different screens I want the logo to position at the right place. It is now centered with a margin of 75px from the top. On my screen it is perfect, but on screens with higher resolutions the logo needs to have more margin. How do I achieve that? Can you follow me?

    Kind Regards,
    Folkert van der Wei

    #621037

    Hey!

    We are working on your ticket please wait while we update the results here soon.

    To position the logo please change the max width and margin top values to suit your design.

    
    @media only screen and (max-width: 989px) {
    .responsive .logo {
        margin-top: 50px!important;
    }}

    To create the list items similar to the mockup please follow the steps below

    First enable custom css class name support as mentioned in below links

    kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    1. use a colorsection and add a custom class name to it

    2. add 2 1/2 cols and icon list inside it
    NOTE: The numbers need to be added in a span tag with class name “box-dark”

    3. add the below css

    .custom-list .iconlist_icon, .custom-list  .iconlist-timeline {
      display: none;  
    }
    
    .custom-list h4 {
    background:gold;
    }
    .box-dark{
    display:inline-block;
      min-width: 40px;
      min-height: 40px;
      line-height: 40px;
      text-align: center;
      color:#fff;
      margin-right:20px;
      background:#333;
    }

    Or just enable debug mode as mentioned here kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    and use the below page shortcode with the above css in step 3

    [av_section min_height='' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' id='' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='custom-list']
    
    [av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
    
    [av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' custom_class='']
    [av_iconlist_item title='<span class="box-dark">1 </span> List Title ' link='' linktarget='' linkelement='' icon='43' font='entypo-fontello'][/av_iconlist_item]
    [av_iconlist_item title='<span class="box-dark">2 </span>List Title ' link='' linktarget='' linkelement='' icon='25' font='entypo-fontello'][/av_iconlist_item]
    [av_iconlist_item title='<span class="box-dark">3 </span> List Title ' link='' linktarget='' linkelement='' icon='64' font='entypo-fontello'][/av_iconlist_item]
    [/av_iconlist]
    
    [/av_one_half][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
    
    [av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' custom_class='']
    [av_iconlist_item title='<span class="box-dark">1 </span> List Title ' link='' linktarget='' linkelement='' icon='43' font='entypo-fontello'][/av_iconlist_item]
    [av_iconlist_item title='<span class="box-dark">2 </span>List Title ' link='' linktarget='' linkelement='' icon='25' font='entypo-fontello'][/av_iconlist_item]
    [av_iconlist_item title='<span class="box-dark">3 </span> List Title ' link='' linktarget='' linkelement='' icon='64' font='entypo-fontello'][/av_iconlist_item]
    [/av_iconlist]
    
    [/av_one_half][/av_section]

    Best regards,
    Vinay

    • This reply was modified 7 years, 11 months ago by Vinay.
    #628381

    Thanks for your reply Vinay!

    I’ve managed to lower the logo in several resolutions, but I now have a new problem. I want to lower the menu as well. I’ve tried this:

    @media only screen and (min-width: 1440px) and (max-width: 2249px) {
    .responsive .logo {
    margin-top: 100px!important;
    }
    #header_main .container {
    height: 340px !important;
    }
    #header-scrolled .logo img {
    margin-top: 15px!important;
    max-width: 300px!important;
    }
    #header_scrolled .container {
    height: 140px !important;
    }
    }
    @media only screen and (min-width: 2250px) {
    .responsive .logo {
    margin-top: 250px!important;
    }
    #header_main .container {
    height: 440px !important;
    }
    #header-scrolled .logo img {
    margin-top: 15px!important;
    max-width: 300px!important;
    }
    #header_scrolled .container {
    height: 140px !important;
    }
    }

    And it works, however not went scrolling down. Any idea how I can fix that? Of you might have another solution for me to lower the menu.

    Kind regards.
    Folkert

    #629553

    Hi there,

    Also a question about the iconlist solutions you gave me. It works superb! Thanks a lot. However on mobile I want the Iconlist title in a smaller fontsize. This because the tekst doesn’t fit in the darkbox on mobile. How do I fix that?

    Thanks.

    Kind regards Folkert

    #629565

    Hi!

    The header looks good when is scroll please elaborate the issue if you have any. Kindly request you to open new tickets for new issues.

    To make the text fit in icon list please use the below css it will make the box scroll if there is more text. Reducing the text size will make it hard to read :)

    .iconlist_title {
        max-height: 70px;
        overflow: auto;
    }

    Best regards,
    Vinay

    #629661

    Hi there,

    Sorry should have told you THE menu problems are at higher resolutions. Above 2250 pixels wide..

    Hope you can help.

    Kind regards
    folkert

    #629924

    Hi!

    Unfortunately i don’t have a monitor with that resolution at the moment. Please post a screenshot of the issue let me see if i can figure out anything from the screenshot.

    Regards,
    Vinay

    #633256

    Cann’t you zoom out to see the same result?

    #633812

    Hi,

    I checked your website on 1920x1200px screen and everything seems fine on my end.
    Zooming out on browser would not always reflect the layout behaviour on bigger screens. Please post a screenshot of the issue as Vinnie requested so we can have better understanding on the issue

    Best regards,
    Yigit

    #634355

    Hello,

    Screenshot in the private content. Would like to lower the menu and the logo, however when scrolling down i want the sticky header to be as small as it is now.

    Hope you can help. Thanks!

    #635053

    Hi!

    Use this to adjust the position of the menu:

    @media only screen and (min-width: 2000px) {
    .html_header_top.html_bottom_nav_header .main_menu {
        top: 200px;
    }
    }

    This should work but screens with 2000px++ resolutions are rarely used.

    Regards,
    Ismael

    #638627

    Ola,

    Thanks for your reply. It works, how ever when scrolling down the menu doesn’t stick at the top. Is there anyway to change that?

    Kind regards,
    Folkert

    #639426

    Hi,

    it looks good to me:

    View post on imgur.com

    What else do you want to achieve? Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Andy

    #640760

    Hi Andy,

    Not at the resolution of 2500+. Check image underneath:

    [img]http://i.imgur.com/Hn74zle.png[/img]

    What i want is when scrolling down, that the sticky menu will stick on top like in your screenshot.

    Hope you can help.

    Folkert

    #640765

    screenshot

    #640851

    Hi,

    this happens because you’re using this code:

    @media only screen and (min-width: 2250px) {
    .html_header_top.html_bottom_nav_header .main_menu {
    top: 200px;
    }}
    

    Change it to something like:

    @media only screen and (min-width: 2250px) {
    .html_header_top.html_bottom_nav_header .main_menu {
    top: -1px;
    }}
    

    Best regards,
    Andy

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