Jump to content


Photo
- - - - -

Fixed Nav Bar & Standard Nav Bar

fixed nav bar standard nav bar mobile friendly

Best Answer James B , 17 April 2013 - 10:59 PM

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.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 17 April 2013 - 10:13 PM

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

Please Login or Register to see this Hidden Content

 

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



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 April 2013 - 10:35 PM

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

Please Login or Register to see this Hidden Content

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.



#3 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 17 April 2013 - 10:43 PM

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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

"><h3>Call (614) 467-4427 Today!</h3></a></li>
</ul> </div>
<div class="clear"></div>

#4 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 17 April 2013 - 10:44 PM

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('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-42 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-55 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-44 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-181 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-67 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-68 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-69 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-70 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-71 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-174 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); background-repeat: no-repeat;}
li.menu-item-342 a:hover {background-image: url('

Please Login or Register to see this Hidden Content

'); 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?

#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 April 2013 - 10:59 PM   Best Answer

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.







Also tagged with one or more of these keywords: fixed nav bar, standard nav bar, mobile friendly