• 0
Sign in to follow this  
Followers 0

Fixed Navigation Bar customization for Desktop & Mobile


Question

Posted · Report post

Hello.

How can I make my Fixed Navigation Bar be centered on Desktop? 

 

 

Also, I want to make my pink scallop background to work. It's not working properly right now, see IMAGE #01 and IMAGE #02.  

 

IMAGE #01

 

 

 

 

 

 

When the navigation starts to jump to the second and third row, the image starts to repeating again. See IMAGE #02 below

IMAGE #02

 

 

 

 

 

This is the MOBILE version, the pink scallop background doesn't look good. See example IMAGE #03 below

IMAGE #03

 

 

 

 

 

MORE INFO:

 

PageLines Framework Version 2.4.4

Wordpress 3.7.1

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

To center your navigation, you can use try the following code:

 

#site .section-navbar.fixed-top .navline { text-align: center; float: none; }
#site .section-navbar.fixed-top .navline > li { float: none; display: inline-block; }
#site .section-navbar.fixed-top .navline > li > ul > li { text-align: left; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Unfortunately, We do not provide extensive CSS support nor do we provide support to users generated CSS. However, your issue is that you have styled the Fixed Navbar, in order to have a style like yours, you will probably need to use @media queries, so that your style is only loaded at specific resolutions.

For more information on @media queries, see here - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm trying to center the NAVBAR, and I used your advise but I don't know what's wrong with my code below.  Please advise

 

@media only screen 
and (min-width : 1224px) {
  #site .navigation_wrap .main_nav {
    margin-right: 0;
    width: 100%;
  }
}
 
@media only screen 
and (min-width : 1224px) {
  #site .main_nav ul {
    text-align: center;
    float: none;
  }
}
 
@media only screen 
and (min-width : 1224px) {
  #site .main_nav li {
    float: none;
    display: inline-block;
  }
}

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
Sign in to follow this  
Followers 0