Jump to content


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


Mobile Nav menu with Custom url and fixed nav

Recommended Posts


Hi guys,


I am currently working on single page site using a smooth scroll feature with page anchors. 


I have enabled fixednav and created a new menu in the dashboard using custom URL to correspond to the relevant page anchors. 

For example for Services - http://flcreative.ie/#services.


Anyway all is working fine on the desktop site but when using a mobile or tablet the menu items are missing and what seems to be a default menu is displayed. i.e. Home , Sample Page. 


Is there a way of displaying the new custom menu on the mobile menu? 





Share this post

Link to post
Share on other sites

Hi Sean,


yeah that won't work I don't think, due to the way the mobile navigation works. What you could do is, not use the Fixed Navigation option and instead use your own HTML.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Ok Danny ill give it a go. If i sort something out ill post it up here.

Share this post

Link to post
Share on other sites

seanocaside21 Great!  Keep us posted!

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

  • Similar Content

    • emilyf
      By emilyf+
      Hi there, 
      My site is www.brianboggschairmakers.com/newbuild.  If this question has been answered before, please excuse me! I just haven't found someone else with my exact problem - or perhaps I am making the changes in the wrong place.
      I have been looking to increase the overall size of the fixed navbar and its contents. I want the menu text and the logo image to be about 1.5% bigger, and to remain vertically centered in the fixed navbar.
      I was able to increase the height of the fixed navbar by adding the following to my custom CSS (wordpress dashboard > Appearance > CSS stylesheet editor):
      section-navi .navi-wrap { height: 80px; } BUT, I am stumped as far as how to increase the font size of the menu, how to increase the size of the site logo, or how to keep it all vertically centered! As far as font size goes, I tried adding the following to my custom CSS, but nothing's happening.
      .navbar .navline > li > a { font-size: 20px !important; }  
      Your help is much appreciated!
    • pazyluz
      By pazyluz+
      Hi folks, this is a longstanding unanswered question. I am either unable to find the correct selector or there is another reason why I cant change the size or color of menu items and search bar in the fixed nav. I need to change them to white or make the font bigger because they can barely be seen. Here is the code given me by the theme designer (which didn't work either): 
      "Here is the code you need for the navbar:
      .navbar.pl-color-base .navline > li > a {
      color: rgba(135,174,17,1);
      text-shadow: none;
      transition: all 0.1s linear 0s;
      }  "
      Below is all the code I have pasted in regarding the fixed nav.   .navbar.pl-color-black-trans { background: #330033; border-top: 1px solid rgba(0,0,0,0.99); } .navbar. {   border-top: 1px solid #330033;   background-color: #330033;   border-top: 1px solid #330033; } .navbar .plbrand {   float:left;   margin:0 2% 0 0;   padding:0 1%;   font-weight: 400 }   .navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {     background-color: #330033;     box-shadow: 0 -4px 0 #87AE11 inset;     color: #87AE11; } .navbar.pl-color-base .navline > li > a {     color: rgba(135, 174, 17, 0.6);     text-shadow: none;     transition: all 0.1s linear 0s; } .navbar .navline > li.current-menu-item > a {     background-color: rgba(0, 0, 0, 0.1);     color: #FFFFFF;     text-decoration: none; } .navbar .navline > li > a {     color: rgba(255, 255, 255, 0.8);     display: block;     float: none;     line-height: 19px;     padding: 9px 12px;     text-decoration: none;     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .my-title-1 { font-color: #330033 !important; } .page-id-77  .pl-imageframe img, img.pl-imageframe { background-color: #FFFFF; border: none; }     Again, I need to change either font or size or both to make the menu items in the fixed nav more visible. Thanks for any help. Screenshot attached. Nope, guess not.  Last question:  why am I getting this "You have exceeded your allotted disk space for attachments"  You can see my fixed nav on my site
    • kellid
      By kellid
      Hello :)
      On the homepage my site, I'm using the 'Navi' in fixed position.  I've anchored the links in the 'Navi' to sections on the homepage, and in each of those sections is a link to a full page with more information on that topic.  Each of these full pages of info have a different navigation menu than the homepage.  The full topic pages use the 'Navbar' and have links pointing to the other 5 pages of information.  Is there a way to have the 'Navbar' menu fixed on these pages or have 2 different fixed navigation bars?  
      Thank you!!
    • kellid
      By kellid
      Hi all,
      My goal is to remove the fixed nav bar on all pages except the home page.  This is the code I was using and it works in firebug but not in custom css...
      .page-id-77.section-navi .navi-wrap {  
      Can you tell me what I'm doing wrong? 
    • anikonpro
      By anikonpro
      I have a fixed nav menu at the top.  All except custom links show on android.  Also error code shows up in that expanded menu.  Can someone take a peek and see it this is a glitch?