Archived

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

  • 0

Fixed Nav Bar & Standard Nav Bar


Question

Posted · Report post

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

4 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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