Jump to content

Archived

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

tborges

Fixed Navigation Bar customization for Desktop & Mobile

Recommended Posts

tborges

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
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tborges

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
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Kedark
      By Kedark+
      Hello, I need help. Can and how to do it. I need to add more page appearance templates (page attributes). At the moment it's default and FRAMEWORK A, FRAMEWORK B etc. I need to add two more. How can I do this.
      Unfortunately, I did not find such a thread on the forum.
      Regards
      Radoslaw
    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
×