• 0

DMS 2 Full Width Navbar won't center


Question

Posted · Report post

Hi, I'm trying to center a full width navbar - I have tried using without sucess:

 

---------------
.section-navbar .navline {
float: none;
text-align: center;
}
 
.section-navbar .navline li {
display: inline-block;
float: none;
}
---------------
 

 

...and also prefixed with #site as advised:

 

---------------
#site.section-navbar .navline {
float: none;
text-align: center;
}
 
#site.section-navbar .navline li {
display: inline-block;
float: none;
}
---------------
 
 
please can someone help as this is doing my noggin in! :o)
 
here is the html for the navbar...

<!-- NavBar | Section Template -->
<section id="navbarue94r4x" data-object="PLNavBar" data-sid="navbar" data-clone="ue94r4x"  class="pl-area pl-area-sortable area-tag    pl-bg-cover section-navbar" style="  ">
<div class="pl-area-controls">
<span class="area-control tt-bottom area-delete area-hide" data-area-action="delete" title="Delete">
<i class="icon icon-remove"></i>
</span><span class="area-control tt-bottom area-clone area-hide " data-area-action="clone" title="Clone ">
<i class="icon icon-copy"></i>
</span>
<span class="area-control tt-bottom area-save area-hide " data-area-action="save" title="Save As Section ">
<i class="icon icon-save"></i>
</span><span class="area-control tt-bottom area-reorder area-hide" data-area-action="reorder" title="Move">
<i class="icon icon-reorder"></i>
</span><span class="area-control tt-bottom area-edit section-edit" data-area-action="settings" title="Edit">
<i class="icon icon-pencil"></i>
</span><span class="area-control tt-bottom area-unlock" data-area-action="unlock" title="Break Link">
<i class="icon icon-unlock"></i>
</span>
</div>
<div class="pl-area-pad fix"> <div class="navbar fix navbar-full-width plnav_hover pl-color-black-trans">
 <div class="navbar-inner pl-content boxed-wrap boxed-nobg">
   <div class="navbar-content-pad fix">
 
   
     <a href="javascript:void(0)" class="nav-btn nav-btn-navbar mm-toggle"> MENU <i class="icon icon-reorder"></i> </a>
      <div class="nav-collapse collapse">
      <ul id="menu-primary" class="font-sub navline pldrop pull-left"><li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item menu-item-236"><a href="http://www.themoonandsixpencehanwell.com/">Home</a></li>
<li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-237"><a href="http://www.themoonandsixpencehanwell.com/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="http://www.themoonandsixpencehanwell.com/about-us/hylton-bradley/">Hylton Bradley</a></li>
<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="http://www.themoonandsixpencehanwell.com/about-us/the-pub/">The Pub</a></li>
<li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="http://www.themoonandsixpencehanwell.com/about-us/charles-wells/">Charles Wells</a></li>
</ul>
</li>
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-241"><a href="http://www.themoonandsixpencehanwell.com/menu/">Menu</a>
<ul class="sub-menu">
<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-242"><a href="http://www.themoonandsixpencehanwell.com/menu/a-la-carte-menu/">À La Carte Menu</a></li>
<li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="http://www.themoonandsixpencehanwell.com/menu/grill-menu/">Grill Menu</a></li>
<li id="menu-item-244" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-244"><a href="http://www.themoonandsixpencehanwell.com/menu/table-dhote-menu/">Table d&#8217;hôte Menu</a></li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="http://www.themoonandsixpencehanwell.com/menu/pub-classics-menu/">Pub Classics Menu</a></li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="http://www.themoonandsixpencehanwell.com/menu/desert-menu/">Dessert Menu</a></li>
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="http://www.themoonandsixpencehanwell.com/menu/sunday-lunch/">Sunday Lunch</a></li>
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="http://www.themoonandsixpencehanwell.com/menu/vegetarian-menu/">Vegetarian Menu</a></li>
</ul>
</li>
<li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-249"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/">Wines / Ales</a>
<ul class="sub-menu">
<li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/white-wines/">White Wines</a></li>
<li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/rose-wines/">Rosé Wines</a></li>
<li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-252"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/red-wines/">Red Wines</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/champagne/">Champagne</a></li>
<li id="menu-item-254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-254"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/dessert-wines/">Dessert Wines</a></li>
<li id="menu-item-255" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-255"><a href="http://www.themoonandsixpencehanwell.com/wines-ales/real-ales/">Real Ales</a></li>
</ul>
</li>
<li id="menu-item-256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-256"><a href="http://www.themoonandsixpencehanwell.com/lunch-club/">Lunch Club</a></li>
<li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257"><a href="http://www.themoonandsixpencehanwell.com/news/">News</a></li>
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://www.themoonandsixpencehanwell.com/functions/">Functions</a></li>
<li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-259"><a href="http://www.themoonandsixpencehanwell.com/find-us/">Find Us</a></li>
<li id="menu-item-260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-260"><a href="http://www.themoonandsixpencehanwell.com/review-us/">Review Us</a></li>
<li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="http://www.themoonandsixpencehanwell.com/contact-us/">Contact Us</a></li>
</ul> </div>
<div class="clear"></div>
</div>
</div>
</div>
</div></section>

 

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi,

 

In future please refrain from posted all that code, we do not need to see the sections code.

 

Try adding the following to your custom CSS.

 

#site .section-navbar .navline {
float: none;
text-align: center;
}
 
#site .section-navbar .navline li {
display: inline-block;
float: none;
}
 
If that doesn't work, please provide a link to the site in question.
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for reply danny.. I have the primary items centered using the following css 

 

#navbarue94r4x.section-navbar .navline {
float: none!important;
text-align: center!important;
}
#navbarue94r4x.section-navbar .navline li {
display: inline-block;
float: none;

}

 

but this is now also centering child dropdown menus too - I have tried :

 

#navbarue94r4x.dropdopwn-menu {text-align: left!important;} 

 

...but no good. can you advise how to left align the menu items within the dropdown please

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please remove all custom CSS and provide a link to the site in question and I will take a look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny. I had the same question and your code worked for me. 

 

Jenna

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