OnPoint Plugins

← Back to support

Custom menu styles

Resolved

Requested: 5 months and 2 weeks ago

How can I added padding to my menu items it seems that the padding is hardcoded inline and I can’t override.

See this video for more info

  4. Hi Jacques,

    When the menu has blocked styles enabled, the padding are rendered to target the specific menu by id.

    To adjust specific menu padding you may target the menu by id like so.

     

  5. Hi Jacques,

    Adding the following styles should get you pretty close to the target menu. Once you have it setup enough for us to see, we can help you fine tune it further.

    Some notes:

    1. You will have to update the #advanced-sidebar-navigation-menu-2-wrap id to match the menu you are targeting.
    2. The menu should have none or a minimum amount of styles set through the options.
    3. Block styles should be enabled for convenience.

    Have a great day!

  6. WOW  thanks so much, guys this is getting very close now. Just a few tweaks to get this finalized please and thanks!

    Please refer to this video

    https://www.loom.com/share/8abe3894b7614e0380c87b08c48889c9

    And as mentioned I am fully aware that styling these menu items is entirely out of the scope of your support so please let me know what I owe you guys for your assistance and I will be happy to send you an e-transfer or pay pal transfer for your assistance.

     

    Here is a page with 3rd-level inks with current styling applied

    https://whistlercadev.wpengine.com/climate-action/big-moves/rebates-incentives/energy-rebate-program/

    So the summary for the additional tweaks are as follows

    Top Level Item “Climate Action”

    Fonts size : 1.6rem
    color: #76A031
    Border underneath
    10px Margin below the border

    Active Parent (blue bg area big moves) 
    Please make the text and accordion control colour white for the text that is above the blue list item.

    3rd level item ( items with dash in front)  example Big Moves > Rebates and incentives > Residential Energy Assessment Rebate Program

    Please remove the spacing before the – however forth level items should have some spacing

    Test Page

    https://whistlercadev.wpengine.com/climate-action/big-moves/rebates-incentives/energy-rebate-program/test-forth-level/

    Reference Page from current site

    https://www.whistler.ca/business/land-use-and-development/planning/policies-and-regulations/age-friendly-assessment-and-action-plan

    Please apply bold text to the 1st level items.   Items with – should not have bolding.

    Thanks again!

     

     

  7. Hi Jacques,

    Adding the following CSS below what was already provided should get you pretty close.

    We include styling assistance as part of our priority support so no worries on payment. 🙂 If you really want to thank us, leaving a review helps other people know what to expect.

    Have a great day!

New Response

You must be logged in to respond. Only PRO members are allowed to respond to support requests.