Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 30, 2019 at 12:36 am #1084755
    webworm72

    I need to a shift the logo in the header area and the menu items to the left as well as adjust the padding of the menu items.

    see image below
    live home page

    See mock up from clients o you can see what I am shooing for.
    Home page mock up

    April 1, 2019 at 7:59 am #1085315
    Nikko

    Hey webworm72,

    Can you give us a link to your site? so we can check on it further and try to give you the css codes that you need.

    Best regards,
    Nikko

    April 1, 2019 at 9:55 am #1085389
    webworm72
    This reply has been marked as private.
    April 1, 2019 at 12:39 pm #1085465
    Nikko

    Hi webworm72,

    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    .html_header_top #top .av_header_stretch .container {
    width: 100%;
}

#header #header_main {
    border-bottom: none;
}

#header #header_main nav.main_menu {
    padding-right: 2%;
}

    Best regards,
    Nikko

    April 1, 2019 at 9:01 pm #1085695
    webworm72

    thanks Nikko !
    that allowed me to center the menus items and it got rid of the border.at the bottom !
    I found another bit of code to get the logo all the way to the left. See live page in private section to see progress.

    Now I just need to be able to adjust the padding/spacing of the menu times.
    *I need to be able to adjust the top and bottom padding of teh menu items
    * need to be able to adjust the padding/spacing horizontally between the menu items to space them out more , so as to more closely resemble
    the mock up below.

    mock up

    thank you for all your help !

    • This reply was modified 5 years, 8 months ago by webworm72.
    April 4, 2019 at 2:46 am #1086718
    Nikko

    Hi webworm72,

    We apologize for the delayed response, please add this css code:

    #header #header_main nav.main_menu {
    padding-right: 0;
    width: calc(100% - 250px);
}

#header #header_main nav.main_menu .avia-menu, 
#header #header_main nav.main_menu .avia-menu #avia-menu {
    width: 100%;
}

#header #header_main nav.main_menu .avia-menu #avia-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

    Best regards,
    Nikko

    April 4, 2019 at 4:38 am #1086728
    webworm72

    thanks Nikko no worries , I appreciate your help.
    So I added that code and all it did was push the main menu items to the left against the logo

    All I’m looking to do is add some horizontal space/padding between the main menu items to more fully fill in the header area , as in mock up

    • This reply was modified 5 years, 8 months ago by webworm72.
    April 4, 2019 at 5:06 am #1086738
    Nikko

    Hi webworm72,

    I have checked it and the code I gave doesn’t seem to be fetched.
    Try to flush out caching and disable css minification.
    In Enfold > Performance > disable CSS file merging and compression.

    Best regards,
    Nikko

    April 4, 2019 at 9:51 am #1086912
    webworm72

    That did it !!! ok your my hero now ;-)

    I just tested and it works fine on Firefox and Chrome

    It’s not working correctly on Edge and IE …any thoughts ?

    • This reply was modified 5 years, 8 months ago by webworm72.
    April 4, 2019 at 10:05 am #1086925
    Nikko

    Hi webworm72,

    Thanks for your kind words :)
    We’re glad that we are able to help.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How to adjust logo and menu item padding in header’ is closed to new replies.