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

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


    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×