Plugin related and other generic customizations 2
(→How to add a Navigation menu in a Builder module) |
(→How to Create Mobile Navigation like the new Air Theme) |
||
(4 intermediate revisions by one user not shown) | |||
Line 642: | Line 642: | ||
= How to Create Mobile Navigation like the new Air Theme = | = How to Create Mobile Navigation like the new Air Theme = | ||
+ | ==Important notice - new plugin== | ||
+ | On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/ | ||
+ | |||
+ | So we encourage you to take the plugin for a test drive first, and provide feedback through that forum. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==Manual implementation== | ||
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support. | There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support. | ||
+ | |||
===Pre-requisites=== | ===Pre-requisites=== | ||
Line 663: | Line 673: | ||
</pre> | </pre> | ||
− | ===Enable the Mobile Nav as an Alternative | + | ===Enable the Mobile Nav as an Alternative Module Style=== |
Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>) | Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>) | ||
− | '''NOTE: when using a navigation menu in another module (e.g. an HTML module, see below)''' | + | '''NOTE: when using a navigation menu in another module (e.g. an HTML module, see [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_add_a_Navigation_menu_in_a_Builder_module below])''' |
In the following code, replace: | In the following code, replace: | ||
Line 691: | Line 701: | ||
'''NOTE:''' | '''NOTE:''' | ||
− | To avoid conflicts, the above function <code>it_builder_loaded()</code>will '''only''' run if a function with the same name '''does not already exist'''. Some themes are already using this function to load custom styles. In that case, '''you should not add this function''', but instead '''add the code''' <code>builder_register_module_style( ' | + | To avoid conflicts, the above function <code>it_builder_loaded()</code>will '''only''' run if a function with the same name '''does not already exist'''. Some themes are already using this function to load custom styles. In that case, '''you should not add this function''', but instead '''add the code''' <code>builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );</code> to the existing function! |
===Add the css code for the Mobile navigation=== | ===Add the css code for the Mobile navigation=== | ||
Line 814: | Line 824: | ||
Select the Mobile navigation Style in the Builder Layout Manager for that specific Module. | Select the Mobile navigation Style in the Builder Layout Manager for that specific Module. | ||
− | + | ===How to add a Navigation menu in a Builder module=== | |
[[File:Htmlmodulemobile.jpg|600px|thumb|none]] | [[File:Htmlmodulemobile.jpg|600px|thumb|none]] |
Latest revision as of 17:37, February 4, 2014
This is Page 2 of Plugin related and other generic customizations in Builder. Here is Page 1.
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.
Method 1
1. Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
2. Instead of a navigation module, use a PHP enabled HTML module having this sample code:
<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?> <div class="my-social-icons"> <ul> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: [email protected]"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li> </ul> </div>
Note:
- In the above, change
primary
to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will bemain-menu
. - It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.
3. Add the following sample code at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
/************************************************************************ For right floating social icons in a HTML module showing nav bar *************************************************************************/ .builder-module-2 { background: #FAA51B; } .menu-primary-container { float: left; } #menu-primary { margin-bottom: 0; } li.social-icon a, li.social-icon a:hover { padding: 1px 0 0 8px; } li.social-icon a:hover { opacity: 0.8; -moz-opacity: 0.8; background: none; } li.social-icon:hover, li.social-icon:hover a { background: none; } .my-social-icons { float: right; margin-right: 10px; padding-top: 8px; } .my-social-icons ul { list-style: none; } .my-social-icons li { float: left; }
Note: In the above
a) Change the number (2) in .builder-module-2
so it is the module number from top in layout.
b) In
.builder-module-2 { background: #FAA51B; }
replace background: #FAA51B;
with child theme's styles set for navigation module or in the case of Thinner, those of .builder-module-navigation ul.menu
. i.e.,
.builder-module-2 { /*background: #FAA51B;*/ overflow: hidden; background: #F6F6F6; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6)); background: -webkit-linear-gradient(#FFFFFF, #F6F6F6); background: -moz-linear-gradient(#FFFFFF, #F6F6F6); background: -ms-linear-gradient(#FFFFFF, #F6F6F6); background: -o-linear-gradient(#FFFFFF, #F6F6F6); background: linear-gradient(#FFFFFF, #F6F6F6); border: 1px solid #FFF; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: #AAAAAA 1px 1px 2px; -moz-box-shadow: #AAAAAA 1px 1px 2px; -o-box-shadow: #AAAAAA 1px 1px 2px; -khtml-box-shadow: #AAAAAA 1px 1px 2px; box-shadow: #AAAAAA 1px 1px 2px; }
c) primary
to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu
.
Method 2
Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
1. Edit your child theme's functions.php.
Add the following at the end (before closing PHP tag, if present):
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2); function add_images($items, $args) { $items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: [email protected]"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>'; return $items; }
Note: In the above code, main-menu must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is Primary Navigation, then
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
must be changed to
add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);
2. Add the following at the end of child theme's style.css and customize it if necessary:
/* Custom Styles For The Social Media Widget Icons in Navigation */ li#first-social-icon { margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */ } /* li.social-icon { height: 36px; } */ /* Needed only in certain themes like Traverse */ li.social-icon a, li.social-icon a:hover { padding: 1px 0 0 8px; } li.social-icon a:hover { opacity: 0.8; -moz-opacity: 0.8; background: none; } li.social-icon:hover, li.social-icon:hover a { background: none; }
That's it!
This method is also explained here.
Sample implementations:
1. Traverse with round icons:
How to use CSS3 PIE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
It is used to get CSS3 properties like border-radius working in IE older than version 9.
Follow the steps below to make CSS3 PIE work in Builder:
Update on July 11, 2012: Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. This forum topic provides an example where post comment text area (which already has border-radius
set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.
1. Download the latest version of CSS3 PIE from here.
2. Extract the zip flle and upload PIE.htc to any web reachable directory.
Ex.:
public_html/assets/PIE.htc
3. Add position: relative;
style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).
Ex.:
#text-6 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; position: relative; } #text-6 .widget-title { -moz-border-radius:10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; border-radius:10px 10px 0px 0px; position: relative; }
The above CSS is written to make a widget whose ID is text-6 rounded.
Screenshot in Firefox:
4. Add the following in your child theme's functions.php:
function my_render_ie_pie() { ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> #your-css-elements-here { behavior: url('http://www.redkitecreative.com/PIE.htc'); } </style> <![endif]--> <?php } add_action('wp_head', 'my_render_ie_pie', 8);
In the above, replace
-
#your-css-elements-here
with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE. - http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.
Ex.:
Code in functions.php:
function my_render_ie_pie() { ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> #text-6, #text-6 .widget-title { behavior: url('http://sridhar.internal.ithemes.com/assets/PIE.htc'); } </style> <![endif]--> <?php } add_action('wp_head', 'my_render_ie_pie', 8);
Now border-radius property for #text-6 and #text-6 .widget-title will work in IE 8 and below.
Screenshot in IE 8:
Note:
- This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. Screenshot.
- IE 9 supports border-radius natively. So PIE will not be used in IE 9.
That's it!
Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/
How to float a div at any position on top of other elements in the container
1. Add the following in child theme's functions.php:
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 ); function add_floating_box() { ?> <div id="floating-box-container"> <div id="floating-box"> HTML or PHP code comes here </div> </div> <?php }
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
2. Add the following at the end of child theme's style.css:
#floating-box-container { max-width: 1000px; /* set this to container (layout) width */ width: 100%; margin: 0 auto; position: relative; z-index: 100; } #floating-box { position: absolute; top: 50px; left: 0; background: yellow; width: 200px; height: 100px; }
In the above, you might want to adjust top, left, background, width and height values.
A practical example of implementing this method can be found here.
Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559
How to show top most (latest) post in full and the others as excerpts
Screenshot: http://d.pr/nfl1
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
Replace the the_content() or the_excerpt() function call with the following:
<?php /* Conditional output flag set after first post */ ?> <?php if($showexcerpt) : ?> <?php the_excerpt(); ?> <?php else: ?> <?php the_content(); ?> <?php endif; ?> <?php $showexcerpt=true; ?>
Ex.: In Foundation Blank's index.php,
<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
should be replaced with
<?php /* Conditional output flag set after first post */ ?> <?php if($showexcerpt) : ?> <?php the_excerpt(); ?> <?php else: ?> <?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?> <?php endif; ?> <?php $showexcerpt=true; ?>
With the above change, the top most (latest) post will be shown in full unless more quick tag, is used. If more quick tag is used, "Read More→" will appear at the cut off point.
How to remove hyperlink from tagline in Header module
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
// load our javascript in the footer add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { add_action( 'print_footer_scripts', 'my_footer_script' ); } // Add jQuery to footer function my_footer_script() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.site-tagline a').replaceWith(function() { return this.innerHTML; }); }); </script> <?php }
How to get the output of a Header module in a HTML module
Using a HTML module gives more control than a Header module in situations like this.
Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:
<?php if (is_front_page()) : ?> <h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3> <?php else : ?> <h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3> <h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5> <?php endif; ?>
builder_module_render_navigation
hook can be used to inject content below and/or above all nav bars in Builder.
In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.
1. Add the following in child theme's functions.php
(before closing PHP tag if present):
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 ); function show_featured_image() { if (has_post_thumbnail() && is_page()) { ?> <div class="my-featured-image-header"> <?php the_post_thumbnail(); ?> </div> <?php } }
2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
.my-featured-image-header img { margin-top: 0; margin-bottom: 0; vertical-align: top; } .builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */ margin-bottom: 0; }
If 20
in
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
is changed to 0
, then the function will be output ABOVE the nav bar(s).
Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/
How to Fix "Missing required fields" warnings in Structured Data Testing Tool
Rich Snippets Testing Tool can be used to check whether Google can correctly parse your structured data markup and display it in search results.
Before:
After:
The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.
You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.
- Title of the post should be marked with class
entry-title
- Posting date should be marked with class
updated
- Full name of the post author should be marked with class
author
accomplished by elements from hCard microformat –vcard
andfn
Sample generated HTML code should be:
<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span> <span class="updated">December 24, 2011</span> <span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>
To fix Warning: Missing required field "updated"
in Builder
Locate the date
div and add updated
class to it.
Ex.:
Change
<div class="entry-meta date">
to
<div class="entry-meta date updated">
To fix Warning: Missing required hCard "author"
in Builder
Change
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
to
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.
Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972
Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.
Ex.:
<div class="entry-meta date updated"> <?php echo get_the_date(); ?> </div> <?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
was added above
<!-- post content -->
In child theme's style.css:
.home .entry-title, .page .date, .page .author { display: none; }
Source:
http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/
http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/
How to Make Entire Text Widgets Clickable
When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.
display: block
CSS can be used so the entire widget becomes clickable.
Ex.:
Code in a text widget:
<a href="#" class="my-widget-link">Mold Removal and Remediation</a>
CSS:
a.my-widget-link { display: block; font-size: 1.65em; padding: 1em; } #builder-module-514372ec66190 .widget { padding: 0; }
where builder-module-514372ec66190
is the ID of widget bar module having the widget.
How to Enable Comments For Custom Post Types
1. Ensure that support for Comments is enabled in the CPT.
How this is done depends on the method being used to set up the CPTs.
Here's an example when using CustomPress:
2. Go to My Theme -> Settings -> Comments.
Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.
3. In the CPT add/edit screen, tick Allow comments
in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick Discussion
.
Important notice - new plugin
On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/
So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.
Manual implementation
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
Pre-requisites
- Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
- Responsive needs to be enabled in the child theme (functions.php should contain:
add_theme_support( 'builder-responsive' );
Include the javascript code that enables the Mobile dropdown
- Copy the
js
folder and contents from the Air child theme to your child theme. - Add the following code at the end of your child theme's
functions.php
file, yet before the closing?>
(if any):
// Enqueuing and Using Custom Javascript/Jquery function it_air_load_custom_scripts() { wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true ); wp_enqueue_script('it_air_jquery_additions'); } add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
Following the code added in step 1, add the following code in functions.php
(again, before a closing ?>)
NOTE: when using a navigation menu in another module (e.g. an HTML module, see below)
In the following code, replace:
builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' );
with
builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );
// Add Support for Alternate Module Styles if ( ! function_exists( 'it_builder_loaded' ) ) { function it_builder_loaded() { builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' ); } } add_action( 'it_libraries_loaded', 'it_builder_loaded' );
NOTE:
To avoid conflicts, the above function it_builder_loaded()
will only run if a function with the same name does not already exist. Some themes are already using this function to load custom styles. In that case, you should not add this function, but instead add the code builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );
to the existing function!
Add the following code at the end of your child themes mobile stylesheet style-mobile.css
:
Note: when using a navigation menu in another module (e.g. an HTML module)
In the following css code, replace all occurrences of:
.builder-module-navigation.mobile
with
.builder-module-html.mobile
/********************************************* Navigation Module (Mobile) *********************************************/ .builder-module-navigation.mobile { padding-top: .5em !important; } .builder-module-navigation.mobile ul { margin-top: .5em; } .builder-module-navigation.mobile li { width: 100%; position: relative; } /* second level stuff */ .builder-module-navigation.mobile li ul { position: relative !important; left: 0 !important; border: 0; width: 100%; margin: 0; } .builder-module-navigation.mobile li a, .builder-module-navigation.mobile .current_page_item li a, .builder-module-navigation.mobile .current-cat li a, .builder-module-navigation.mobile .current-menu-item li a { margin: 0; background: transparent; border-color: transparent; color: #3B3F42; border-bottom: 1px solid rgba(0,0,0,0.1); } .builder-module-navigation.mobile li a:hover, .builder-module-navigation.mobile .current_page_item li a:hover, .builder-module-navigation.mobile .current-cat li a li a:hover, .builder-module-navigation.mobile .current-menu-item li a:hover { background: #3B3F42; color: #ECECEC; } .builder-module-navigation.mobile li li { border: 0; width: 100%; } .builder-module-navigation.mobile li ul ul { margin: 0; } .builder-module-navigation.mobile li li a { padding: .25em 0 .25em 2em; line-height: inherit; border-radius: 2px; } .builder-module-navigation.mobile li li li a { padding-left: 4em; } .builder-module-navigation.mobile-nav .menu.hidden { display: none; } #it-mobile-menu { background: #3B3F42; color: #ECECEC; padding: .25em .75em; display: block; cursor: pointer; border-radius: 2px; -webkit-font-smoothing: antialiased; } .builder-module-navigation.mobile.borderless { border: 0; }
Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/********************************************* Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide) *********************************************/ #it-mobile-menu { display: none; }
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
When using a navigation menu in another module (e.g. an HTML module):
Select the Mobile navigation Style in the Builder Layout Manager for that specific Module.