Jump to content


Photo
- - - - -

Fixed Navigation Bar customization for Desktop & Mobile

Fixed Navigation Bar NavBar navigation customization desktop mobile Framework navigation background NavBar Background

Best Answer Danny , 12 November 2013 - 10:39 AM

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; }
Go to the full post


  • Please log in to reply
3 replies to this topic

#1 tborges

tborges

    Member

  • Members
  • 15 posts

Posted 09 November 2013 - 12:55 AM

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



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 November 2013 - 08:58 AM

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 - 

Please Login or Register to see this Hidden Content



#3 tborges

tborges

    Member

  • Members
  • 15 posts

Posted 12 November 2013 - 02:03 AM

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;
  }
}


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 November 2013 - 10:39 AM   Best Answer

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

 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: Fixed Navigation Bar, NavBar, navigation customization, desktop, mobile, Framework, navigation background, NavBar Background