Jump to content

Archived

This topic is now archived and is closed to further replies.

kulmetehan

Styling Mobile/Responsive Menu

Recommended Posts

kulmetehan

Hi guys,

 

Does anyone have an idea on how to style the Mobile/Responsive menu? Currently when I visit the website on a mobile phone I get the three barred menu option on the top right side of the website. When I click this, a menu slides in. It's a dark black menu with grey/white letters. I would like to edit this in to the websites theme/colors etc.

 

Any idea on how I can do this?

Share this post


Link to post
Share on other sites
Aires

HI kulmetehan

 

Give this a try 

 

body .pl-mobile-menu {
  background-color: your color here;
  color: your text color here;
}
 
just in case you need these for hover state and active
 
body .pl-mobile-menu a:hover a:active{
 color: your active color;
}
 
body .pl-mobile-menu a:hover {
  color:your hover color;
}
 
~Aires

 

 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jmad

Aires suggestion is good!  If you are looking for other mobile nav options (some are even cool to use at any pixel width).  Try Shift Nav or the Responsive Menu.  Both good options to change up the navigation from time to time.  Here are the links.

 

https://wordpress.org/plugins/wp-responsive-menu/ I haven't tried this one...

 

https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/ There is also a paid version with more options, I tested the free version and it's good but I haven't taken a site live using it yet.

 

https://wordpress.org/plugins/responsive-menu/ Really like and easy to use....I'd donate to this if the author had that option

 

HeroNav in the DMS is also very useful and offers some different design options.  (Turn off caching while you work with this and refresh for changes)

 

Ubermenu is highly customizable (almost too many options) and there are add ons for a sticky menu on scroll and some others.  

 

Share this post


Link to post
Share on other sites
kulmetehan

Hi Aires, Thanks, that worked out great!

 

jmad I'm gonna check those out asap. Thanks for the advice.

 

I have one other question concerning the mobile menu:

 

So because my website doesn't have that many pages, just 5 main pages, the mobile menu is half empty. Stop me if I'm asking too much but Is there any way to fill that up with content like an image or something? Or text maybe?

Share this post


Link to post
Share on other sites
Aires

Hi @kulmetehan 

 

Yeah that should be easy to do with the wordpress menu options and some HTML.

First I would make sure that css classes is turned on by going to screen options at the top of the page andcheck css classes from the window that slides down then add a new menu item to the end of your menu.

 

Now in the Navigation label area is where you are going to add your html something like this as a starting point

 

<h5>text here</h5><br>

<p>text here</p>

 

Now doing it this way will make it visible on the menu all the time thats where the class you added comes in because you will need to use that class with a media query to make it only visible on mobile something like this:

 

@media screen and (min-width: 768px) {
    .your-class-name {
        display:none;
    }

 

It may take some additional css to remove padding or making the font bigger but it should work.

 

~Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
kulmetehan

Hey Aires,

 

Thank you so much!

 

Adding the html to the navigation label are worked as you described. No problem on that side.

 

Unfortunately I didn't really understand what you meant by: "make sure that css classes is turned on by going to screen options at the top of the page andcheck css classes from the window that slides down then add a new menu item to the end of your menu"

 

Where am I supposed to find this "Screen options" button? Sorry, guess I'm kind of a noob. If I can do this, I can use the css code to make it disappear when viewing it from a pc. Hope you can help.

Share this post


Link to post
Share on other sites
Aires

kulmetehan

 

You can find the screen options at the top of the menu page

 

http://i.imgur.com/nkwzTYW.png

 

check the classes option and this should be added

 

http://i.imgur.com/vveF4ko.png

 

and then the class you added can then be used in the media query or for other styling.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

Also because it is a menu item you could just get the menu item number and just use that to. 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
kulmetehan

Hi Aires,

 

Thanks again for the great explanation. I've managed to name the CSS class. But when I use the css code you provided, with the name I put in, it doesn't work.

 

Are you sure that the code is right? Cause if so, then I'm doing something wrong. I already checked myself of course, but will do so again if your code is ok.

Share this post


Link to post
Share on other sites
Aires

kulmetehan

 

add !important

 

@media screen and (min-width: 768px) {
    .your-class-name {
        display:none !important;
    }

 

 

 

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
kulmetehan

Aires That did the trick, thank you very much!

Share this post


Link to post
Share on other sites

  • Similar Content

    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

×