Customizing Your Mobile Menu

Today we are going to talk about the one thing that every website has, the mobile menu.

Sometimes they look good but for the most they look boring and bland unless you purchase some type of premium mobile plugin. Which in my opinion is not really necassary when you  want to make some simple changes. So that is what we are going to cover in this post.

Customizing the background

By default the Platform 5 mobile menu is white which is not bad since white goes with out anything. But what if you wanted to change the background color or even get more adventurous by adding a background image.

Where would you begin?

What class or id would you need to target?

Well I am going shed some light on those questions and hopefully teach a little css in the process. The primary class for the mobile menu is 

.pl-meganav-mobile

  its holds the majority of the styling of the mobile menu width, height, z-index and background color all fall under this class.

To change the the background color all you would need to do is include this in you LESS/CSS area or style sheet.

.pl-meganav-mobile {
background-color: red;
}

Adding a background image

If you wanted to add a background image you will need to take your skills a little bit farther.

To begin you will need  a image. I found that a image that is 300px x 850px is a good size to work with. So load up your photo editing program of your choice and create a document that is 300 x 850. Play around with your image till you have it positioned right.

Next we need to add a white overlay to the image before we save it so the black text will show up better (you case choose dark overlay if your text will be white). To do this I usually create another fill layer over the image and adjust the opacity. There really is no perfect opacity its more of a user preferance so experiment.

 

Save the image and upload it to your site. Also grab the url for the image and paste it in notepad because you will need it in a few.

This is the css we will be using to add the image to our mobile menu.

.pl-meganav-mobile   {
    background: url(image url here) no-repeat;
    background-size:cover;
}

Add you image url and you should see your image appear the next time you open your mobile menu.

Adding a image or logo to your mobile menu

For this part you will need a logo or image that you want to display  at the top of your mobile menu. It should be a png (transparent background) for better results but you can use what ever you like.

First navigate to your menu area and add a custom link to your menu. Name it logo or something it doesn't really matter we are going to change it anyway and be sure it is the first menu item in the list. Before we get to far ahead make sure you have css classes enable from the screen options.

This next step is not needed if you already know how to find your menu-id.

Next we need to add a class of no-desktop to the class area of your custom link.

class

Now grab the url for your logo (don't worry if it is to big we are going to fix that later) and include it in this html <img class="your class" src="image url here" alt="alt text"> also give it a class to follow along give it a class of my-logo . Next we need to copy and paste that into the navigation label of your logo. Things should look similar to this.

logo

 

Return to the front of your site and you should see your logo. We need to hide the logo on desktop so that it can only be seen in the mobile menu. To do this we will use a media query. Just a small note if you are using the menu id you will not need to use the !important declaration but for those that are using the class option you must use !important or it will not work.

Here are examples of both:

With #id

/* hide logo on desktop*/
@media (min-width: 768px) {
    #menu-item-#{
    display: none;
}
}

With class

/* hide logo on desktop*/
@media (min-width: 768px) {
    .no-desktop {
    display: none!important;
}
}

Goodbye logo 🙂

If your logo is to big or needs to be centered we can fix that with some additional css. For starters to resize your logo we are going to use the class that we applied to the image which was my-logo and adjust the width. If you used a different class just replace it with yours.

img.my-logo {
 width: 100px;
 }

To center the logo we can use either the menu item id or the class we applied to the menu item like so...

.no-desktop {
    text-align: center;
}

The final result with a custom background and logo.

menu3

Well that concludes this tutorial if you have any questions post them in the comments.

- Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Customizing Your Mobile Menu

Published on by | Add Comment

Today we are going to talk about the one thing that every website has, the mobile menu.

Sometimes they look good but for the most they look boring and bland unless you purchase some type of premium mobile plugin. Which in my opinion is not really necassary when you  want to make some simple changes. So that is what we are going to cover in this post.

Customizing the background

By default the Platform 5 mobile menu is white which is not bad since white goes with out anything. But what if you wanted to change the background color or even get more adventurous by adding a background image.

Where would you begin?

What class or id would you need to target?

Well I am going shed some light on those questions and hopefully teach a little css in the process. The primary class for the mobile menu is 

.pl-meganav-mobile

  its holds the majority of the styling of the mobile menu width, height, z-index and background color all fall under this class.

To change the the background color all you would need to do is include this in you LESS/CSS area or style sheet.

.pl-meganav-mobile {
background-color: red;
}

Adding a background image

If you wanted to add a background image you will need to take your skills a little bit farther.

To begin you will need  a image. I found that a image that is 300px x 850px is a good size to work with. So load up your photo editing program of your choice and create a document that is 300 x 850. Play around with your image till you have it positioned right.

Next we need to add a white overlay to the image before we save it so the black text will show up better (you case choose dark overlay if your text will be white). To do this I usually create another fill layer over the image and adjust the opacity. There really is no perfect opacity its more of a user preferance so experiment.

 

Save the image and upload it to your site. Also grab the url for the image and paste it in notepad because you will need it in a few.

This is the css we will be using to add the image to our mobile menu.

.pl-meganav-mobile   {
    background: url(image url here) no-repeat;
    background-size:cover;
}

Add you image url and you should see your image appear the next time you open your mobile menu.

Adding a image or logo to your mobile menu

For this part you will need a logo or image that you want to display  at the top of your mobile menu. It should be a png (transparent background) for better results but you can use what ever you like.

First navigate to your menu area and add a custom link to your menu. Name it logo or something it doesn't really matter we are going to change it anyway and be sure it is the first menu item in the list. Before we get to far ahead make sure you have css classes enable from the screen options.

This next step is not needed if you already know how to find your menu-id.

Next we need to add a class of no-desktop to the class area of your custom link.

class

Now grab the url for your logo (don't worry if it is to big we are going to fix that later) and include it in this html <img class="your class" src="image url here" alt="alt text"> also give it a class to follow along give it a class of my-logo . Next we need to copy and paste that into the navigation label of your logo. Things should look similar to this.

logo

 

Return to the front of your site and you should see your logo. We need to hide the logo on desktop so that it can only be seen in the mobile menu. To do this we will use a media query. Just a small note if you are using the menu id you will not need to use the !important declaration but for those that are using the class option you must use !important or it will not work.

Here are examples of both:

With #id

/* hide logo on desktop*/
@media (min-width: 768px) {
    #menu-item-#{
    display: none;
}
}

With class

/* hide logo on desktop*/
@media (min-width: 768px) {
    .no-desktop {
    display: none!important;
}
}

Goodbye logo 🙂

If your logo is to big or needs to be centered we can fix that with some additional css. For starters to resize your logo we are going to use the class that we applied to the image which was my-logo and adjust the width. If you used a different class just replace it with yours.

img.my-logo {
 width: 100px;
 }

To center the logo we can use either the menu item id or the class we applied to the menu item like so...

.no-desktop {
    text-align: center;
}

The final result with a custom background and logo.

menu3

Well that concludes this tutorial if you have any questions post them in the comments.

- Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match