Jump to content

Archived

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

jmad

Nav Bar not fixed centering

Recommended Posts

jmad

I've used the following code to center the text in the navbar, remove the search button and change the background color of the popout moblie menu.  What I'm trying to accomplish is using the navbar as basically a clear section so it looks like simple nav but I can still have the mobile menu.  

 

Oddly, I'm having trouble changing the bar to no background or transparent.  What code do I need to make the bar transparent?  Also, is it possible to center the mobile menu once it appears?

 

 

 

#site .section-navbar .navline {
float: none;
text-align: center;
}
 
#site .section-navbar .navline li {
display: inline-block;
float: none;
}
 
#site .searchform .searchfield{
  display: none;
}
 
.pl-mobile-menu {
  background-color: #062833 !important;
}
 
 
.pl-mobile-menu a{
  font-size: 12px !important;
}
 

Share this post


Link to post
Share on other sites
James B

Hi there,

 

You can hide the search bar in the navbar options - http://screencast.com/t/0tQVP52Ryw5x

 

The navbar color uses a lot of cross browser code which is assigned to a class for the color used in the navbar menu options. So example all the colors for the black option in the drop down would be as below. If you adjust the colors for the below in the code (to none in your instance as you want it clear) and set the color in the navbar drop down to black this will override the color in all browsers.

 

.navbar.pl-color-black-trans { background-color: rgba(0, 0, 0, 0.12);
background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);
border-top: 1px solid rgba(0, 0, 0, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);

}

 

What are you looking to center with the mobile menu? The button or the actual menu which pops out the side of the screen?


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
jmad

I'm not using the fixed navbar but just the navbar I tried the hide search bar option in the DMS options but it didn't have any effect on just the navbar should it.  

 

Okay. So basically if I set the bar to completely transparent in all the areas above then it should work?

 

On the pl-mobile-menu I adjusted just the background color and it looks like that should be good across browsers...shouldn't it?  Its working on mobile devices until about the third click then I get a white space instead of the menu...

Share this post


Link to post
Share on other sites
jmad

Copy and pasted the code you gave me and it completely invalidated my CSS.  Took it out and all is well.  Other suggestions?  Other options?

 

It's this bit that's causing all CSS to disappear...how do I correct?

 

background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);

 

and I didn't try adding the line below back in...

 

Also, why couldn't I see all that code in the inspector?  Did I need to look at the CSS of the DMS parent theme?

 

Just looking to center the button but being able to center the menu out to the side would be good also!

Share this post


Link to post
Share on other sites
James B

Hi there, did you make sure the closing bracket was included. I notice looking at my paste it's appeared a couple of lines down.

 

I've just tested that code on my site and it's worked http://screencast.com/t/IUFaEQdol7mf that last line is for certain versions of IE.

 

Firefox only shows the code it renders, if looking in chrome it will show the full cross browser code, it will show assigned to the class for the pl-color being used (that's selected in the navbar options from the 5 colors available). You can then edit the colors for that class to fit your own. http://screencast.com/t/bEWxy3wo1

 

That code/process is the same for the fixed or standard navbar they both use the same color classes.


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
jmad

I'm in Chrome but didn't see the .navbar.pl-color-black-trans class set anywhere just .navbar and the container.  

 

Yes I have the code like you provided, with one add on to get ride of the border.  I worked line by line and it's the 

 

background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);

 

that jacks up the site.  It's on a test site madsky1.wpengine.com so you can take a look.

 

Also, how do I center the mobile menu button and the popout side menu if possible.  More concerned with button.

Share this post


Link to post
Share on other sites
Danny

You can use the following to make your navbar transparent:

 

#site .pl-color-black-trans {
background: rgba(0, 0, 0, 0);
border: none 0;
box-shadow: none;
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
 
Also, James code should not have made any ill effects to your site, I added his code to my test site and had no such problem.
 
You will now by adding that code, need to use custom CSS to change the style of the navbar button when in mobile view, you will also want to change the color of the text.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

@Danny 

 

I understand the code shouldn't have but if you look at the site, it did.  If I remove the line of code I mentioned before it corrects....I added the code line by line and it's not until I add that 3rd to last line that things go crazy.

 

Anyway, I'll use the code you provided, do I need to add webkit and moz in order for this to work cross browser?

 

Also how do I center the mobile button?  Can the pop out menu be centered?

 

Also, this is the first site I might bring live in DMS.  Will the code you gave me still work when v1.2 arrives or will the navbar coding have changed enough that this won't be valid any longer?

Share this post


Link to post
Share on other sites
jmad

james

 

I still am trying to center the mobile button.  

Share this post


Link to post
Share on other sites
jmad

Never mind on the mobile button.  Changed the float to none and the padding left to 45% @media 767 and 42.5% on @ media 480.  Looks good and I think that should work across browsers.

Share this post


Link to post
Share on other sites

×