How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will… Read More »

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

How to Create Sticky Floating Navigation Menu in WordPress

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.

Sticky Menu plugin setting

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take your mouse to the navigation menu. After that, you need to right click and select Inspect from your browser’s menu.

Inspect tool

This will split your browser screen, and you will be able to see the source code for your navigation menu. You need to find a line of code like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

In this example, our navigation menu’s CSS ID is site-navigation.

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

The next option in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device.

You can test how it looks on mobile devices or tablets. If you don’t like it, then you can add 780px for this option.

Don’t forget to click on the save settings button to store your changes.

You can now visit your website to see your sticky floating navigation menu in action.

Sticky menu

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

First you need to visit Appearance » Customize to launch theme customizer.

Adding custom CSS in WordPress theme

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

This can be easily adjusted by adding a margin to your header area using some CSS like this:

.site-branding {
margin-top:60px;
}

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will… Read More »

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

How to Create Sticky Floating Navigation Menu in WordPress

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.

Sticky Menu plugin setting

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take your mouse to the navigation menu. After that, you need to right click and select Inspect from your browser’s menu.

Inspect tool

This will split your browser screen, and you will be able to see the source code for your navigation menu. You need to find a line of code like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

In this example, our navigation menu’s CSS ID is site-navigation.

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

The next option in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device.

You can test how it looks on mobile devices or tablets. If you don’t like it, then you can add 780px for this option.

Don’t forget to click on the save settings button to store your changes.

You can now visit your website to see your sticky floating navigation menu in action.

Sticky menu

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

First you need to visit Appearance » Customize to launch theme customizer.

Adding custom CSS in WordPress theme

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

This can be easily adjusted by adding a margin to your header area using some CSS like this:

.site-branding {
margin-top:60px;
}

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

How to Add a WordPress Widget to Your Website Header

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.… Read More »

The post How to Add a WordPress Widget to Your Website Header appeared first on WPBeginner.

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.

Add a WordPress widget to your site's header

Note: This is an intermediate level tutorial. You will need to add code to your WordPress theme files and write CSS.

Why and When You Need a Header Widget on Your Site?

Widgets allow you to easily add content blocks to a designated area in your WordPress theme. These designated areas are called sidebars or widget-ready areas.

A widget ready area in header or before content can be used to display ads, recent articles, or anything you want.

This particular area is called ‘Below the fold’ and all popular sites use it to show really important stuff.

The header section on the popular List25 website

Typically, WordPress themes add sidebars next to the content or in footer area. Not many WordPress themes add widget-ready areas above the content are or in the header.

That’s why in this article, we will cover how to add a widget area to your WordPress website’s header.

Step 1. Creating a Header Widget Area

First, we need to create a custom widget area. This step will allow you to see your custom widget area on Appearance » Widgets page in your WordPress dashboard.

You will need to add this code to your theme’s functions.php file.

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

This code registers a new sidebar or a widget ready area for your theme.

You can now go to Appearance » Widgets page, and you will see a new widget area labeled ‘Custom Header Widget Area’.

Custom header widget area

Go ahead, and add a text widget to this newly created widget area and save it. See our guide on how to add and use widgets in WordPress for detailed instructions on adding widgets.

Step 2: Display Your Custom Header Widget

If you visit your website now, you will not be able to see the text widget you just added to your newly created header widget.

That’s because we haven’t yet told WordPress where to display this widget area.

Let’s do that in this step.

You will need to edit the header.php file in your theme and add this code where you want to display your custom widget area.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
	
<?php endif; ?>

Don’t forget to save your changes.

You can now visit your website and you will see your header widget area.

Unstyled header widget

You will notice that it looks a bit unpolished. That’s where you will need CSS to make it look better.

Step 3: Style Your Header Widget Area Using CSS

Depending on your theme, you will need to add CSS to control how the header widget area and each widget inside it is displayed.

The easier way to do this is by using CSS Hero plugin. It allows you to use an intuitive user interface to change CSS of any WordPress theme. For more details see our CSS Hero review.

If you don’t want to use a plugin, then you can add custom css to your theme by visiting Appearance » Customize page.

This will launch the WordPress theme customizer interface. You will need to click on the ‘Additional CSS’ tab.

Adding custom CSS to a WordPress theme

The additional CSS tab in theme customizer allows you to add your custom CSS while watching the changes appear in the live preview.

For the sake of this tutorial, we are assuming that you will be only using this area to add a single widget to display banner ads, or a custom menu widget.

Here is some sample CSS to help you get started.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

This is how our custom header widget area looked on the default Twenty Seventeen theme.

Preview of header widget

You may need to adjust the CSS to match your theme. Take a look at our guide on how to add custom styles to WordPress widgets.

We hope this article helped you learn how to add a WordPress widget to your site’s header. You may also want to see our list of 25 most useful WordPress widgets for your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a WordPress Widget to Your Website Header appeared first on WPBeginner.

How to Style WordPress Navigation Menus

Do you want to customize your WordPress navigation menus to change their colors or appearance? Your WordPress theme handles the appearance of navigation menus on your site. You can easily customize it using CSS to meet your requirements. In this article, we will show you… Read More »

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.

Do you want to customize your WordPress navigation menus to change their colors or appearance? Your WordPress theme handles the appearance of navigation menus on your site. You can easily customize it using CSS to meet your requirements. In this article, we will show you how to style WordPress navigation menus.

Style WordPress Menus

Method 1: Style WordPress Menus Using a Plugin

Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable editing theme files or writing CSS on their own.

That’s when a WordPress menu styling plugin comes in handy. It saves you from editing theme files or writing any code.

First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.

Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.

Now you need to click on the CSS Hero button in your WordPress admin toolbar.

Launch CSS Hero

CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.

CSS Hero toolbar

You need to click on the blue icon at the top to start editing.

Take your mouse to your navigation menu and CSS Hero will highlight it by showing borders around it. When you click on the highlighted navigation menu, it will show you the items you can edit.

Point and click your navigation menu in CSS Hero

In the screenshot above, it shows us menu item, menu navigation, navigation menu container, etc.

Let’s assume we want to change the text color of all items in the navigation menu. In that case, we will select menu navigation which affects entire menu.

CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.

Editing navigation menu properties in CSS Hero

You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.

Editing navigation menu text color

In the screenshot above, we selected text, and it showed us a nice interface to select fonts, change text color, size, and other properties.

As you make changes, you will be able to see them live in the theme preview.

Preview live changes

Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

Method 2: Manually Style WordPress Navigation Menus

This method requires you to edit your WordPress theme files. You should use it only if you are comfortable editing code and understand how WordPress themes work.

The best way to make customizations to your WordPress theme is by creating a child theme. If you are only changing CSS, then you can see our guide on how to easily add custom CSS in WordPress without changing your theme files.

WordPress navigation menus are displayed in an unordered list (bulleted list).

If you just used the following tag, then it will display a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.

This might work if you have only one menu location. However, most themes have multiple locations where you can display navigation menus.

Using only the default CSS classes may cause conflict with menus on other locations.

This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using code like this:

<?php
	wp_nav_menu( array(
		'theme_location' => 'primary',
		'menu_class'     => 'primary-menu',
		 ) );
?>

This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.

Now you can style your navigation menu using this CSS structure.

#header .primary-menu{} // container class
#header .primary-menu ul {} // container class first unordered list
#header .primary-menu ul ul {} //unordered list within an unordered list
#header .primary-menu li {} // each navigation item
#header .primary-menu li a {} // each navigation item anchor
#header .primary-menu li ul {} // unordered list if there is drop down items
#header .primary-menu li li {} // each drop down navigation item
#header .primary-menu li li a {} // each drap down navigation item anchor

Replace #header with the container class or ID used by your WordPress theme.

This structure will help you completely change the appearance of your navigation menu.

However, there are other classes that are automatically added by WordPress to each menu and menu item. These classes allow you to customize your navigation menu even further.

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

WordPress also allows you to add CSS classes to individual menu items from within admin area.

You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.

Head over to Appearance » Menus page and click on the Screen Options button.

Enable CSS classes option in WordPress menus screen

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Adding a custom CSS class to a menu item in WordPress

Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.

We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.

How to Change the Gravatar Image Size in WordPress

Recently one of our readers asked if it is possible to change the Gravatar image size. The answer is yes. In this article, we will show you how to change the Gravatar image size in WordPress. Gravatar is a globally recognized avatar that connects a… Read More »

The post How to Change the Gravatar Image Size in WordPress appeared first on WPBeginner.

Recently one of our readers asked if it is possible to change the Gravatar image size. The answer is yes. In this article, we will show you how to change the Gravatar image size in WordPress.

How to Change Gravatar Image Size in WordPress

Gravatar is a globally recognized avatar that connects a user’s email address with their picture. Popular applications like WordPress and others use it to display user’s photo on the website.

Most WordPress themes by default add a Gravatar next to each user comment. Some even use it for the author bio box.

Let’s take a look at how you can change the Gravatar image size on your WordPress site.

Note: Since Gravatar Image size is defined by your theme, you would need to edit your theme files to change it.

Change Gravatar size for WordPress Comments

The first thing you need to do is open the comments.php file located in your themes folder.

You would need to connect to your website using FTP and then go to /wp-content/themes/yourtheme/.

Alternatively if your WordPress hosting company offers a File Manager, then you can edit this file using the web interface in your cPanel.

In the comments.php file, you need to find the following code: avatar_size

It will be inside the wp_list_comments function like this:

<?php
wp_list_comments( array(
	'style'       => 'ol',
	'short_ping'  => true,
	'avatar_size' => 32,
) );
?>

Simply change the size to whatever dimensions you like. Gravatars are square, so the value you set will be the same for both width and height.

Go ahead and save your changes. If you are using FTP, then upload the changes to your server.

Now open a post that has comments to see if your changes are live.

If it is not, then your theme’s CSS is overriding it. The best way to check is to use Inspect Elements tool in your browser.

Simply right click on the Gravatar in your browser and click Inspect Element.

Inspect Element Comments Gravatar

You need to look at the height and width of the Gravatar image to see if it reflects the value that you set.

When you bring your mouse over it, it will also highlight the gravatar on the image and show you the size it’s actually displaying.

Gravatar Image Size WordPress

You’ll notice that the two are different. This means that your theme’s style.css file is overriding the default image size. Many themes including the default Twenty Sixteen theme use CSS to control the Gravatar image size for different screen sizes.

You need to open the style.css file in your theme’s folder and search for avatar. You’ll likely find a CSS class: .comment-author .avatar which contain a code like this:

.comment-author .avatar {
	height: 42px;
	position: relative;
	top: 0.25em;
	width: 42px;
}

Go ahead and change the width and height to match the value you set earlier in the comments.php file.

That’s all. You have successfully changed the gravatar image size in your WordPress comments.

Now you might be wondering if you can override the image size using CSS, then why did we change the avatar_size in the comments.php file?

Yes, while you can take the CSS shortcut, there are two benefits to doing it this way:

1. No blurry images

If you wanted to resize the WordPress Gravatar and make it larger then the default image size, then it will look blurry.

2. Faster Load Times

Now if you wanted to make the Gravatar smaller then the default image size, then the CSS only method will look just fine.

However by changing the size in comments.php, you’re actual image is smaller thus reducing the page size and improving your site speed.

Change Gravatar size for Author Bio

Depending on the theme that you use, it may also use Gravatar for author bio boxes. You can change the default gravatar size in a very similar way as comments.

You need to locate the theme file which adds the bio. It could be in the single.php file, functions.php file, or even as a separate template part file. The default Twenty Sixteen theme uses the template part file called biography.php.

When searching the files, you need to look for the code get_avatar.

For the sake of this example, we will use TwentySixteen default theme as an example. In the themes folder:

/wp-content/themes/twentysixteen/template-parts/biography.php file

It reads like this:

$author_bio_avatar_size = apply_filters( 'twentysixteen_author_bio_avatar_size', 32 );

echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );

You will just have to change the number 32 to whatever you like.

In other themes, the code may look like this:

get_avatar( get_the_author_meta( 'user_email' ), 32);

After you change the size, refresh the page to see if the size updated. If not, then you’d need to search for the avatar class in the style.css file like we showed for comments, and update the size there as well.

We hope this article helped you change the gravatar size in WordPress. You may also want to see our guide on 25 most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change the Gravatar Image Size in WordPress appeared first on WPBeginner.

How to Remove the Powered by WordPress Footer Links

Do you want to remove the powered by WordPress footer links on your site? Recently one of our readers asked if it was possible to remove footer credits in WordPress themes. In this article, we will show you how to remove the powered by WordPress… Read More »

The post How to Remove the Powered by WordPress Footer Links appeared first on WPBeginner.

Do you want to remove the powered by WordPress footer links on your site? Recently one of our readers asked if it was possible to remove footer credits in WordPress themes. In this article, we will show you how to remove the powered by WordPress footer links in your themes.

Remove Powered by WordPress Links

The default WordPress themes use the footer area to display the “Proudly powered by WordPress” link. Many theme developers take this further and add their own credits, so it looks something like “Powered by WordPress. Theme by Company Z”.

But if you’re running a business website, then it doesn’t make any sense to display these credits. Some even think that it makes your website look unprofessional.

Is it legal to remove WordPress footer credit links?

We get this question a lot. Yes, it is absolutely legal to remove footer credits link on your WordPress site.

WordPress is free, and it is released under the GPL license.

In short, that license gives you the freedom to use, modify, and even redistribute WordPress. Any WordPress theme or plugin that you download from the official WordPress.org directory, and even most commercial WordPress themes are also released under the same license.

So you have full rights to do what you please with your website including removing the footer credit links.

Let’s take a look at how to customize your WordPress footer and remove these credit links.

Removing WordPress Powered by Links

There are many ways to remove the WordPress footer credit links, but we only recommend the following 2 ways of doing this.

The Theme Settings Page

Most good theme authors know that their users want to have the option to remove footer credit links. That’s why they make it available in their theme settings area.

Different themes have this setting available under different sections. But the first place to start looking is inside the WordPress theme customizer (Appearance » Customize).

For example, the GetNoticed theme by Michael Hyatt give users the option to customize the footer text as well as disable the credit links.

GetNoticed Footer Credits Setting

Other places that you can look are individual theme’s options pages or inside the Widgets section.

Footer.php Code Method

If your theme does not have the option to remove or modify footer credits from WordPress admin, then your only option is to edit the footer.php code.

You can find this file in your /wp-content/themes/yourtheme/footer.php

Simply open this file in a text editor and search for the footer credit text like “Powered by”, and it will show you the section that you need to remove.

In the default Twenty Sixteen theme for WordPress, the code looks like this:

<div class="site-info">
				<?php
					/**
					 * Fires before the twentysixteen footer text for footer customization.
					 *
					 * @since Twenty Sixteen 1.0
					 */
					do_action( 'twentysixteen_credits' );
				?>
				<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
				<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>
			</div><!-- .site-info -->

You can either remove this text entirely or customize it to suit your needs.

Avoid the CSS Method at All Cost

Now some WordPress tutorial sites may show you a CSS method that uses display: none to hide the footer credit links.

However doing so will put your site’s SEO at risk. Google does not like hiding links with display:none because that’s a technique that spammers use to hide the links from users while still showing it to Google (in hopes of higher rankings).

Your site might get flagged, and it will cause you to lose your search engine rankings.

So whatever you do, do not use the CSS method like this:

#site-info {display:none}

While it looks simple, it’s not good for SEO.

We strongly recommend using the two methods that we showed above. If you cannot do either of those, then we recommend hiring a professional to help you remove your footer credit links or even consider changing your WordPress theme.

We hope this article helped you remove the powered by WordPress footer links. You may also want to check out our guide on how to improve your WordPress security.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Remove the Powered by WordPress Footer Links appeared first on WPBeginner.

How to Add Custom Navigation Menus in WordPress Themes

Custom Navigation Menus feature in WordPress 3.0 will make WordPress even more user friendly for beginners. This function let you organize your menu, create drop down menus, add new items to menu, and much more. In this article, we will show you how you can enable and install custom navigation menus in your themes.

The post How to Add Custom Navigation Menus in WordPress Themes appeared first on WPBeginner.

Do you want to add custom navigation menus in your WordPress theme? By default, many WordPress themes come with pre-defined menu locations and layouts. In this article, we will show you how to add more navigation menus in your WordPress theme.

Add Navigation Menu to Themes

When Do You Need this WordPress Navigation Menu tutorial?

Most WordPress themes come with at least one spot where you can display your site’s navigation links in a menu.

You can manage menu items from an easy to use interface inside your WordPress admin area.

If you’re just looking to add navigation menus on your website, then follow our beginner’s guide on how to add a navigation menu in WordPress.

This tutorial is geared towards DIY users who are building a custom WordPress theme or someone who needs to add additional menu locations to an existing WordPress theme.

Having said that, let’s take a look at how to add custom WordPress navigation menus in your theme.

Creating Custom Navigation Menus in WordPress Themes

Navigation menus are a feature of WordPress themes. Each theme can define their own menu locations and menu support.

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.

Custom menu as theme location

If you want to add more than one new navigation menu location, then you would need to use a code like this:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Once you have added the menu location, go ahead and add some menu items in the WordPress admin by following our tutorial on how to add navigation menus for beginners.

This will allow us to move on to the next step which is displaying the menu in your theme.

Displaying Custom Navigation Menus in WordPress Themes

Next, we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are usually placed is in the header section of a website just after the site title or logo.

However, you can add your navigation menu anywhere that you want.

You will need to add this code in your theme’s template file where you want to display your menu.


<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

The theme location is the name that we selected in the previous step.

The container class is the CSS class that will be added to your navigation menu. Your menu will appear as a plain bulleted list in your website.

Custom menu displayed as plain list

You can use the CSS class .custom_menu_class to style your menus. Here is a sample CSS to help you get started:

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

If you need further assistance with the CSS and menu layouts, then we recommend using one of these WordPress starter themes to build out your custom themes.

Creating Mobile-Friendly Responsive Menus in WordPress

With the increase in usage of mobile devices, you may want to make your menus mobile-friendly by adding one of the many popular effects.

Responsive menu plugin demo

You can add a slide out effect (above), dropdown effect, and even a toggle effect for mobile menus.

We have a detailed step by step guide on how to make mobile-ready responsive WordPress menus.

Do More With WordPress Navigation Menus

Navigation menus are a powerful web design tool. They allow you to point users to the most important sections of your website.

WordPress allows you to do a lot more than just displaying links in your menu. Try these useful tutorials to extend the functionality of navigation menus on your WordPress site.

That’s all, we hope this ultimate guide helped you learn how to add a navigation menu in WordPress. You may also want to see our list of 25 most useful WordPress widgets for your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Custom Navigation Menus in WordPress Themes appeared first on WPBeginner.

How to Create a Mobile-Ready Responsive WordPress Menu

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily… Read More »

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

Create mobile-responsive WordPress menu

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

Ready? Let’s get started.

Method 1: Add a Responsive Menu in WordPress Using a Plugin

This method is easier and recommended for beginners as it requires no custom coding.

In this method, we will be creating a hamburger menu that slides out on mobile screen.

Responsive menu plugin demo

First thing you need to do is install and activate Responsive Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Responsive menu settings

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

Responsive menu plugin demo

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

Responsive select menu

First thing you need to do is install and activate the Responsive Select Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

Select menu settings

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

Don’t forget to click on the save all settings button to store your changes.

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

First you need to open a text editor like notepad and paste this code.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.


<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Toggle menu preview

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here is a sample CSS that you can use as an starting point:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

Here is how it looked on our demo website:

Responsive slide-in menu in WordPress

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

How to Create a Mobile-Ready Responsive WordPress Menu

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily… Read More »

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

Create mobile-responsive WordPress menu

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

Ready? Let’s get started.

Method 1: Add a Responsive Menu in WordPress Using a Plugin

This method is easier and recommended for beginners as it requires no custom coding.

In this method, we will be creating a hamburger menu that slides out on mobile screen.

Responsive menu plugin demo

First thing you need to do is install and activate Responsive Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Responsive menu settings

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

Responsive menu plugin demo

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

Responsive select menu

First thing you need to do is install and activate the Responsive Select Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

Select menu settings

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

Don’t forget to click on the save all settings button to store your changes.

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

First you need to open a text editor like notepad and paste this code.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.


<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Toggle menu preview

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here is a sample CSS that you can use as an starting point:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

Here is how it looked on our demo website:

Responsive slide-in menu in WordPress

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

How to Randomly Change Background Color in WordPress

Recently, one of our readers asked us if it was possible to randomly change background color in WordPress. Colors play an important role in how users see your website and how they engage. In this article, we will show you how to randomly change background… Read More »

The post How to Randomly Change Background Color in WordPress appeared first on WPBeginner.

Recently, one of our readers asked us if it was possible to randomly change background color in WordPress. Colors play an important role in how users see your website and how they engage. In this article, we will show you how to randomly change background color in WordPress.

Adding random background colors in WordPress

Method 1: Add Random Background Color in WordPress Using Code

This method requires you to add code into your WordPress files. Try this method only if you are comfortable with pasting snippets from web into WordPress.

First you need to add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_bg() { 
$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
$color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
echo $color;
}

This function simply generates a random hex color value and echoes it.

Now you need to edit your theme’s header.php file. Locate the <body> tag line, it will look like this:

<body <?php body_class(); ?>>

Replace it with this line:

<body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">>

Save your changes and then visit your website to see the code in action.

Random background colors

Method 2: Add Random Color Stripes Using Fabulous Background Colors

This method is easier and is recommended for beginners who do not want to edit their WordPress theme files.

First, you need to install and activate the Fabulous Background Colors plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure.

You can now visit your website, and you will see colorful stripes as background color on your website. These stripes will fade and change colors elegantly after every 5 seconds.

Random background stripes

Method 3: Using CSS to Add Non-Random Background Colors in WordPress

Almost all standard compliant WordPress themes use body_class() function in the body tag. This tag adds a number of CSS classes to the body tag in your theme. These default WordPress generated CSS classes can be used to style individual posts, categories, tags, etc.

For example, if your blog has a category called photography, then you can find these CSS classes in the body tag of the category archive page.

CSS classes added by WordPress

You can change background color of that particular category by simply adding this CSS to your WordPress theme or by using custom css plugin.

body.category-photography { 
background-color:#faebd7;
}

Similarly you will also find the post ID class for individual posts in the body class. You can use it to style each WordPress post differently.

body.postid-65 { 
background-color:#faebd7;
} 

We hope this article helped you learn how to randomly change background color in WordPress. You may also want to see our guide on how to add a full screen background image in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Randomly Change Background Color in WordPress appeared first on WPBeginner.