Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 26, 2023 at 2:30 pm #1420448
    Sachs

    Hi Support
    I have 2 things with regards to the logo:

    1) Position of logo
    The logo should be placed left for the left side margin, now it is in the middle of the left margin? How can this be moved?
    Or should the size be smaller? Now it is 340x156px?

    See print.

    )Ipad pro view
    When viewing the website with an ipad, pro the menu item “m os” (should be “Om os” is hidden. I guess, this is due to the logo size?

    See Print
    .Best regards
    Lene

    September 26, 2023 at 3:41 pm #1420473
    Rikard

    Hey Lene,

    1. Did you check the Let Logo And Menu Position Adapt To Browser Window option under Enfold->Header->Header Behaviour?

    2. The logo image you are using seems to have a lot of white space on both left and right, could you try cropping it or upload a logo with a transparent background instead?

    Best regards,
    Rikard

    September 26, 2023 at 4:30 pm #1420490
    Sachs
    This reply has been marked as private.
    September 27, 2023 at 1:41 am #1420632
    Nikko

    Hi Lene,

    1. Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    #top .logo {
    transform: translateX(-30%);
}

    2. Please add this CSS code:

    @media only screen and (max-width:990px) {
  #avia-menu.av-main-nav > li > a {
    padding-left: 25px;
    padding-right: 25px;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    September 27, 2023 at 9:18 am #1420669
    Sachs
    This reply has been marked as private.
    September 27, 2023 at 11:01 am #1420682
    Nikko

    Hi Lene,

    You can replace transform: translateX(-30%); from -30% to 30%, or just adjust the value as you see fit :)

    Best regards,
    Nikko

    September 27, 2023 at 11:49 am #1420689
    Sachs
    This reply has been marked as private.
    September 28, 2023 at 7:18 am #1420759
    Nikko

    Hi Lene,

    I see, for ipad, can you try to change this code I gave:

    @media only screen and (max-width:990px) {
  #avia-menu.av-main-nav > li > a {
    padding-left: 25px;
    padding-right: 25px;
  }
}

    to:

    @media only screen and (max-width:1200px) {
  #avia-menu.av-main-nav > li > a {
    padding-left: 25px;
    padding-right: 25px;
  }
}

    Best regards,
    Nikko

    September 28, 2023 at 4:17 pm #1420822
    Sachs
    This reply has been marked as private.
    September 30, 2023 at 3:05 pm #1420958
    Mike

    Hi,
    If I am understanding correctly you want to line up the logo with the left margin and padding starting at 768px
    Enfold_Support_3508.jpeg
    but doing this makes the logo over lap your menu items because the white space of the logo is so large, try trimming down the logo so it has no white space:
    Enfold_Support_3510.jpeg
    then I think this css will work:

    @media only screen and (min-width: 768px) { 
.html_header_top #top .av_header_stretch .container {
	width: 90%;
	padding: 0px 50px;
}
}

    Best regards,
    Mike

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