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

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • 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.
×