Home › Forums › WoodMart support forum › How to adjust the padding for the main navigation header?

How to adjust the padding for the main navigation header?

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • November 20, 2024 at 7:36 am #613624

    lswang6
    Participant

    Hi there,
    I hope to make the padding of marked area smaller, where I can adjust that? looked around but can not find it.
    thank you.

    regards,
    Luie

    Attachments:
    You must be logged in to view attached files.
    November 20, 2024 at 7:49 am #613626

    lswang6
    Participant

    and hope to have a effects like this: the logo overflow across the shadow line.

    Attachments:
    You must be logged in to view attached files.
    November 20, 2024 at 1:38 pm #613763

    lswang6
    Participant

    tried following, not working:

    div.main-page-wrapper {
    margin-top: 0;
    padding-top: 0;
    }

    header.whb-header{
    margin-bottom: 0;
    }

    November 20, 2024 at 3:16 pm #613810

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I am unable to visit your site due to maintenance mode. Please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    November 20, 2024 at 5:13 pm #613901

    lswang6
    Participant

    Hi there, pls find the login info as below (hidden info)

    November 21, 2024 at 9:50 am #614065

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

    .wd-logo img {
padding-top: 10px !important;
    padding-bottom: 0px !important;
}

.wd-logo img {
    position: relative;
    z-index: 10;
    margin-top: -10px; /* Adjust the value to control how much it overflows */
}

    Best Regards

    November 21, 2024 at 10:04 am #614079

    lswang6
    Participant

    Hi there, Thanks for the support.
    but after tried put these css code into Global custom CSS, it does not have effect (either the padding nor the logo overflow ), could you help to have a double check ? thank you.

    November 21, 2024 at 1:16 pm #614253

    lswang6
    Participant

    the margin and padding even become bigger…
    can you pls help to check on the adjustment?

    Attachments:
    You must be logged in to view attached files.
    November 21, 2024 at 1:57 pm #614278

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    The code is working fine on your site. Try to change the value as per your requirement and check the issue.

    Best Regards

    November 21, 2024 at 2:05 pm #614283

    lswang6
    Participant

    Hi there, I am now keep all layout disabled. not the padding and margin setting vis CSS still not have effects.

    Kind regards,
    Louis

    November 21, 2024 at 5:08 pm #614378

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Custom CSS is working fine on your site. I have changed the value and it is working fine. Check back your site after completely clearing the browser cache and check the issue.

    Best Regards

    November 21, 2024 at 5:55 pm #614407

    lswang6
    Participant

    I am sorry I didn’t express the request well.
    current the code working on the overflow. but logo become very small and can not adjust the size…
    I hope you can bear with me the request, actually just hope the board line of following item (this time is the slider) move up, the effects will be look like this photo.
    Can we just adjust the code of the header container? ( bottom padding or margin I guess)

    (for clean start I remove all previous code now)

    Attachments:
    You must be logged in to view attached files.
    November 22, 2024 at 10:06 am #614520

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.

    .wd-logo img {
    position: relative;
    z-index: 10;
    margin-top: 40px; 
}

    Best Regards.

    November 22, 2024 at 10:16 am #614523

    lswang6
    Participant

    Thank you, the logo move the direct I hoped. It’s almost perfect now.
    1. In sticky mode, how can I disable this modification? as not it also offset position in sticky mode. which is ugly.
    2. Just need to further change the whole header margin (non sticky header ) that shows in RED, I tried to use inspect on Chrome but can not locate the CSS target to change. Can you provide further guidance on that?

    Attachments:
    You must be logged in to view attached files.
    November 22, 2024 at 10:16 am #614525

    lswang6
    Participant

    a current sticky header look like.

    Attachments:
    You must be logged in to view attached files.
    November 22, 2024 at 10:37 am #614542

    lswang6
    Participant

    on the issue 2: i solved by adding:
    :root {
    –wd-header-general-h: 70px;
    }

    now only leaving the diable this in sticky mode.

    November 22, 2024 at 11:12 am #614563

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Now I have checked your site and the logo is showing fine on both simple and sticky header. Check back your site and check the issue.

    Best Regards

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)