What is the correct way to style Offcanvas menu lists? UIkit display styles but I'm just not following exactly where/how I make these changes
Hi Mister Dee, here you can have an approch: https://getuikit.com/docs/offcanvas.html and here: https://community.getbeans.io/discussion/off-canvas-menus/
Hi Oliver, it's actually Ms. Dee.
Offcanvas is already built in. working fine no problem. I was wondering what's the best approach dressing it up- positioning, colour etc..
CSS / Less styling - is under uikit correct? Now I just need to overwrite it and apply my own customization? or modify the default structure infunction.php to take advantage of divider and so forth ?
*By the way is it me or do we have to hit space bar twice on mobile to prevent words from being one long word ?
Hi Dee, under your child theme, you should have a file call style.less, to me it's there: public_html/wp-content/themes/montheme/lib/assets/less/style.less
For example inside to drive offcanvas my way I've add: /****/ / OFFCANVAS SECTION VARIABLES / /*/ @offcanvas-background: rgba(75, 122, 165, 0.1); @offcanvas-bar-width: 220px; @offcanvas-bar-background: @base-color; @offcanvas-panel-margin: 0; @offcanvas-panel-link-color: @base-footing-color; @offcanvas-panel-link-hover-color: #fff; @offcanvas-panel-title-color: @gris-clair; @navbar-nav-font-size: 16px;//14px; @navbar-nav-font-weight: @global-primary-font-weight; @navbar-nav-font-family: @global-primary-font, "Helvetica Neue", Helvetica, Arial, sans-serif; @navbar-nav-hover-background: transparent; @navbar-nav-hover-color: @base-active-color; @navbar-nav-onclick-background: transparent; @navbar-nav-onclick-color: darken(@base-active-color, 20%); @navbar-nav-active-background: transparent; @navbar-nav-active-color: @base-active-color; /****/ / OFFCANVAS-MENU SPECIFIC STYLES / /*/ .hook-offcanvas() {font-family: @base-heading-font-family;} .tm-primary-offcanvas-menu > ul > li > div > ul > li { text-align: left !important; &:hover { background: @viadecom-blue; }//@subnav-pill-active-background; } .hook-offcanvas-bar() { background: @base-body-background; }
You'll find more to overwrite under: public_html/wp-content/themes/tm-beans/lib/api/uikit/src/themes/almost-flat/offcanvas.less Under tm-beans/lib/api/uikit/src/themes there are three themes:default, almost-flat, gradient
I misunterstood your by the way?
Hope I've been clear enought, otherelse way a little, Thierry will come to explain you.
Happy coding.
Hi Oliver,
Yes I understand this. I thought there was another way to set up ulkit styling by finding the menu in lib and override and modify iit by calling it and applying Offcanvas assigned coding.
off-topic- am trying to post via mobile phone and when Iclick on space bar it doesn't work it spaceout andshifts back making my words look like I'm typing one long word on purpose. could be a glitch or my phone.
Hi guys,
To style the offcanvas you can either overwrite UIkit LESS variable or write plain CSS. Here is an interesting conversation about working with LESS files which might help. Regarding adding content (dividers), HTML attributes etc. it can easily be done using Beans HTML API.
What I would suggest is to share a more details about what you are trying to achieve (and a design) so that we can help you with it 🙂
PS: the forum editor is a bit capricious on mobile. It is on the list to things to improve 🙂
Ok I finally figured it out and have it wor king to my advantage. Thanks again.
Awesome!
Is there a best practice to add close or other items in? Do we use the widget to apply that? I noticed I was able to add a search form widget
Hi Dee,
It depends what you want to add. The answer is yes, you can add anything in your offcanvas. If fact, you can add anything anywhere on the page 😉 Here is how you would add a close button for example (from your child theme):
// Enqueue the UIkit dynamic grid component.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'close', 'contrast' ) );
}
// Add offcanvas close button.
add_action( 'beans_widget_area_offcanvas_bar[_offcanvas_menu]_prepend_markup', 'example_offcanvas_close_button' );
function example_offcanvas_close_button() {
?>
<div class="uk-margin-top uk-margin-right uk-overflow-hidden">
<a href="#offcanvas_menu" data-uk-offcanvas class="uk-close uk-contrast uk-float-right"></a>
</div>
<?php
}Note how we first enqueue the UIkit close and contrast componets which we are using for the button. Then we append the button HTML to the beans_widget_area_offcanvas_bar[_offcanvas_menu] markup id and make sure that we set the offcanvas href and data-uk-offcanvas correctly to make sure it toggles the offcanvas onclick.
Have fun,
thanks Thierry