Jump to content

Archived

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

lazlo

Full Width Navbar won't center

Recommended Posts

lazlo    1
lazlo

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
Danny    1,327
Danny

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.
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

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

 

Jenna

Share this post


Link to post
Share on other sites

  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
×