Sleeker Divi Mobile Menu

[et_pb_section admin_label=”section” transparent_background=”off” background_color=”#ffffff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” custom_padding=”0px||0px|” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row” make_fullwidth=”on” use_custom_width=”off” width_unit=”on” use_custom_gutter=”on” gutter_width=”1″ padding_mobile=”on” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on” custom_padding=”0px||0px|”][et_pb_column type=”4_4″][et_pb_image admin_label=”Image” src=”http://legacy.divistride.com/wp-content/uploads/2015/11/sleeker-divi-mobile-menu-1080×675.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

[/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_padding=”|3%||3%” padding_mobile=”off” background_color=”#ffffff” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”][et_pb_column type=”4_4″][et_pb_blurb admin_label=”Blurb” title=”Sleeker Divi Mobile Menu” url_new_window=”off” use_icon=”off” icon_color=”#d76000″ use_circle=”off” circle_color=”#d76000″ use_circle_border=”off” circle_border_color=”#d76000″ icon_placement=”top” animation=”top” background_layout=”light” text_orientation=”left” use_icon_font_size=”off” header_font=”|on|||” header_font_size=”25″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

[/et_pb_blurb][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Since Divi was released back in December of 2013 it has had incredible improvements made to the theme and it really has become the go-to theme for a lot of web designers and businesses who have focused on building their own websites using the theme.

But the mobile menu still looks pretty standard and outdated, which is why we feel that it is time to give Divi mobile menu a facelift and make it stand out a bit more instead of looking like an afterthought.

Changing the menu container width:
The Divi Mobile by default is boxed which we are not a fan of, which is why we are going to make our menu full width by adding the following code.

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LmV0X21vYmlsZV9tZW51IHsKYm9yZGVyOjBweCAjZmZmOy8qQ2hhbmdlIHRoaXMqLwp3aWR0aDoxMjUlOwptYXJnaW4tbGVmdDogLTEyLjUlOwp9[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Styling the menu items:

Next we want to change how the menu items display on the mobile menu, we are going to make 2 menu items sit side by side by adding the following code.

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LmV0X21vYmlsZV9tZW51IGxpIGEsCi5ldF9tb2JpbGVfbWVudSAubWVudS1pdGVtLWhhcy1jaGlsZHJlbiA+IGEgewp3aWR0aDogNDklOwpmbG9hdDogbGVmdDsKYmFja2dyb3VuZDojYjViNWI1Oy8qQ2hhbmdlIHRoaXMqLwptYXJnaW4tYm90dG9tOjVweDsKbWFyZ2luLXJpZ2h0OjElOwpjb2xvcjojZmZmOy8qQ2hhbmdlIHRoaXMqLwp0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

styling the current page link:

Next we want the current page we are on to stand out from all the other mobile menu items, we are going to this by adding the following code.

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]I21vYmlsZV9tZW51IC5jdXJyZW50X3BhZ2VfaXRlbSBhIHsKYmFja2dyb3VuZDogI2RiMWMyNDsvKkNoYW5nZSB0aGlzKi8KY29sb3I6ICNmZmY7LypDaGFuZ2UgdGhpcyovCn0=[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Call to action:

Every website should have a clear call to action that you want the user to take and since they are on their mobile device maybe your call to action should be a click to call button, you can make this link do whatever you want it to do.
to make a link that calls click on custom link option and enter this into the URL field tel:01234567810 and then enter what you would like the menu item to say in the next field.

Now let’s add the following code to our CSS

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LmV0X21vYmlsZV9tZW51IGxpLm1lbnUtaXRlbS5tZW51LWl0ZW0tMTI0IGEgewp3aWR0aDogOTklICFpbXBvcnRhbnQ7CmJhY2tncm91bmQ6ICM4MDAwY2YhaW1wb3J0YW50Owpmb250LXdlaWdodDogYm9sZGVyOwp0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwp9[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

we are going to change the last part of the CSS Class we just added where it say’s .menu-item-124, the specific page CSS class. To do this, we need to open up our browser developer tools by right clicking and selecting inspect element.

[/et_pb_text][et_pb_image admin_label=”Image” show_in_lightbox=”on” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” src=”http://legacy.divistride.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-30-at-7.24.17-PM.png”]

[/et_pb_image][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

once you’ve opened up your developer tools, look through the HTML until you find your last menu item and click on it, will have a CSS Class for that menu item, now replace that old CSS class with one specific to your website.

Changing opens icon:
Basically, we wanting to change the hamburger icon for an X symbol when the mobile menu is open, the X symbol let the user know to press the X symbol to close the menu.

So let’s add the following to our CSS

[/et_pb_text][et_pb_dmb_code_snippet admin_label=”Code Snippet” title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]LyoqIEFwcCBTdHlsZSBoZWFkZXIgYW5kIERyb3AgRG93biBNZW51ICoqLwoubW9iaWxlX25hdi5vcGVuZWQgLm1vYmlsZV9tZW51X2JhcjpiZWZvcmUgewpjb250ZW50OiAiXDRkIjsKfQ==[/et_pb_dmb_code_snippet][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Hopefully, your mobile menu will now fresh new look and stand out from the crowd a bit more.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]