Jump to content
purple

Fixed Nav Bar & Standard Nav Bar

Recommended Posts

purple    0
purple

I am trying to make the standard nav bar for my site mobile friendly.  You can see it here:  http://www.paragonpe.biz

 

I am also trying to get rid of the title "Paragon Pest Elimination" in the fixed nav bar area, center the phone #, and change the font color to white.  Any ideas would be appreciated.

 

Thanks,

 

Sarah

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Sarah

 

The classic nav is responsive by default. Have you made any alterations to the section using css? For example given any of the elements inside or the containers a fixed pixel width etc. The classic nav usually stacks in to a two column format with the links inside.

 

To change the font color you can use css. The telephone number can be centered by adjusting the right margin on the logo in the fixed nav.

 

If you've not used css before inside the framework, check out http://support.pagelines.me/docs/customization/custom-css/ which will give you an overview on the process and advise on the tools we advise you use to find and edit the correct css.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
purple    0
purple

I forgot to add the code I am working with. Here you go:

<span class="navbar-title">Call (614) 467-4427 Today!</span> <a href="javascript:void(0)" class="nav-btn nav-btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</a>

<a class="plbrand" href="http://www.paragonpe.biz" title="Call (614) 467-4427 Today!"><h2 class="plbrand-text">Call (614) 467-4427 Today!</h2></a> <div class="nav-collapse collapse">

<ul id="menu-fixed-nav" class="font-sub navline pldrop pull-left"><li id="menu-item-475" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-475"><a title="Call (614) 467-4427 Today!" href="http://www.paragonpe.biz/contact-us/"><h3>Call (614) 467-4427 Today!</h3></a></li>

</ul> </div>

<div class="clear"></div>

Share this post


Link to post
Share on other sites
purple    0
purple

Yes, I did make changes to my standard nav. Here you go:

Standard Nav Code:

#nav_row { margin:0 auto;

width:700px;}

.main_nav ul li {font-size: 18px;}

.main_nav li a { color: #135A2E !important;}

.main-nav li.current-page-ancestor a,

.main-nav li.current_page_item a,

.main-nav li.current-page-ancestor ul a,

.main-nav li.current_page_item ul a.sf-menu li li { background-color: #EAE8E6; color: #135A2E;}

li.menu-item-43 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}

li.menu-item-42 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}

li.menu-item-55 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/05/nav-button-large.png'); background-repeat: no-repeat;}

li.menu-item-44 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;}

li.menu-item-181 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/05/nav-button-med.png'); background-repeat: no-repeat;}

li.menu-item-67 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-68 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-69 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-70 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-71 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-174 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

li.menu-item-342 a:hover {background-image: url('http://www.wengermarketinggroup.com/wp-content/uploads/2012/07/dropdown-background.png'); background-repeat: no-repeat;}

.main-nav li a:hover,

.main-nav .current-menu-ancestor .current_page_item a:hover,

.main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; }

li.menu-item a:hover {list-style-type:none;

margin:0;

padding:20;

padding-top:15px;

padding-bottom:30px;

}

So obviously then the issue for the mobile friendly standard nav would be to change my fixed width of px to something else. How should I adjust it?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Sarah, yes you can change the width to a % instead of a fixed pixel amount.

 

The code in the first snippet is all html, from there you can use the classes in the css to make the adjustments. Plbrand-text can be used to adjust the adjust the right margin to bring in the text and menu-fixed-nav is the class which will allow you to adjust the color of the font.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Fiskaz
      By Fiskaz
      Hi There,
       
      Today i checked my website on mobile friendly test and whenever I do the test i got same error 
      A temporary error occurred. 33 resources on this page could not be loaded. The results and screenshot may be incorrect. You may want to try again later. Please have a look at below.
      https://www.google.com/webmasters/tools/mobile-friendly/?url=fiskaz.com
       
      I thought there might be just plugin problem but if you go to each link in the resources. You will find many pagelines link get errors.
       
      Please take a look because it might affect other Pageline Websites.
       
    • jchandon
      By jchandon+
      Hello,
       
      I just updated to DMS 2 and the fixed Nav bar came back. I would like to remove it again but I cannot find where to do so. What happened to the Global Settings -> NavBar option? I have also made sure to activate PageLines... No luck searching the forums nor in the DMS User guide.
       
      Thank you for your help!
       
      Jason
    • williamweber
      By williamweber
      I'm wondering if it's possible to insert some text instead of a logo in the fixed nav var. I have the menu setup the way I want but instead of my site title or an image I would like to put some social links sort of like the ones used in Branding tutorial in the Pagelines docs section. http://docs.pagelines.com/tutorials/creating-a-branding-area
       
      It's this possible?
       
      Thanks.
    • jasonkadlec
      By jasonkadlec
      So I have this page: 
       
      http://bethkadlec.wpengine.com/faqs/
       
      I want to be able to link to each FAQ using the DIV ID -- http://bethkadlec.wpengine.com/faqs/#post-20 
       
      for example .
       
      However this positions the div to the top - behind the fixed nav bar.
       
      I found a tutorial at css tricks, but none of the methods presented there are working for me? 
       
      I set a custom class to each div -- .faq.
       
      So why doesn't the pseudo method work? (or the other method, or any CSS that I've found on stackoverflow work?
       
      .faq:before { display: block; content: " "; margin-top: -70px; height: 70px; visibility: hidden; }
       
      Is this because of the less CSS? Or am I just not understanding the concept?
       
      Anyone successfully link to an anchor on the page - and get it to show up below the fixed nav header? 
       
      Thanks! 
       
    • Slsp
      By Slsp
      I want to place a sign-up to a newsletter in the top menu bar
      on the site I'm designing I will be using mailchimp.
      Found this posting for
      "poppy" http://forum.pagelines.com/topic/30343-poppy-as-menu-item/  
      thought by replacing the widget with mailchimp it would work
      but it doesn't could you tell what I need to do to get the sign-up
      for newsletter in the top menu bar to work? 
       
      Add to pagelines-customize functions.php/child theme functions.php....
       
      function be_menu_extras($menu, $args) {
      $extras = do_shortcode( '<li class="menu-item menu-item-type-custom menu-item-object-custom">[mc4wp-form type="a"]Contact[/mc4wp-form]</li>' ); return $menu . $extras; } add_filter('wp_nav_menu_items','be_menu_extras', 10, 2);    
      Its the black fixed bar at the top which also has facebook and twitter links. 
       
      http://twb.thewhiskybond.net/
       
      Thanks,
       
      Sarah
       
      [sharedmedia=core:attachments:1691]  
×