Jump to content


Photo
- - - - -

navbar - disappears when browser window resizes smaller / responsive width issue


  • Please log in to reply
9 replies to this topic

#1 colmdoyle

colmdoyle

    Member

  • Members
  • 15 posts
  • Country: Country Flag

Posted 16 July 2013 - 03:58 PM

Hello I have set up a website using pagelines, its up and running and I have solved most of the styling issues. One last issue bugs me.

 

When the browser window is re-sized in width to something smaller than about 700px the navbar disappears.

 

I think this has something to do with responsive settings for mobile devices etc, I have disabled mobile view etc, I am happy for the full site to be displayed on smaller screens

 

The site is set up as fixed width, static pixel width.

 

Diggin around on the forum i have found that I may need to edit the @media queries which are listed in wp-content/themes/pagelines/sections/navbar/style.less

 

I have copied these into the custom css section of pagelines and edited the values down to something very small, hoping this would overwrite what ever is causing the navbar to disappear when reducing the browser width, but no luck. If someone could help me out here it would be appreciated

 

Here is the custom CSS (here is the url of the website:

Please Login or Register to see this Hidden Content

)

 

@media (min-width:5px) {

    .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }

}

@media (max-width: 5px){

body.navbar_fixed {
    .page-canvas  {
      padding-top: 0;
    }
    .fixed_width #page .page-canvas{
        margin-top: 0;
    }
}
 
@media (max-width: 5px) {

.navbar.navbar-content-width {
    width: 95%;
    margin:0 auto;
}
    
@media (max-width: 5px) {

.navbar .plbrand img{
    max-width: 210px;
}
 
@media (min-width:5px) {
span.navbar-title{display:none;}
}



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 July 2013 - 05:02 PM

Hi,

 

If you look carefully, on the right hand side of your menu, when reduced in size, you will see a button, with three bars in it.  That's precisely what's supposed to happen to your menu in responsive design.  Clicking that button, your menu will display, stacked.  The retraction to the button lets you keep your site navigable, but also keeps the menu from occupying valuable space on mobile devices.



#3 colmdoyle

colmdoyle

    Member

  • Members
  • 15 posts
  • Country: Country Flag

Posted 17 July 2013 - 01:38 AM

Hi Rob, I dont see a button when the page reduces in width... I have attached some screenshots, I think it has something to do with the header section being responsive as I can see the two rounded courners of the page contracting when reducing the page width. Ideally I would like the header inculding navbar to say fixed as per the rest of the page. no elements of this site need to be responsive

 

Thanks Colm

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  106.92KB   0 downloads

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  80.36KB   0 downloads



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 July 2013 - 12:31 AM

Hi there,

 

Looking in the code the site is set to fixed width and 'static' in the layout editor. So even though the background image is resizing due to your css, the actual size is static. If you scroll to the right, the button is there for the menu, but it's not on the screen. If you look at the title at the top left, it rolls of the edge of the page, the button is over at the end of that text.

 

If you switch to a responsive layout this should hopefully resolve. 

 

Otherwise, as a rough fix try the below css

 

body.fixed_width #page, body.fixed_width #footer, body.canvas .page-canvas {
    width960px;
}


#5 colmdoyle

colmdoyle

    Member

  • Members
  • 15 posts
  • Country: Country Flag

Posted 18 July 2013 - 01:57 AM

Hi James, thanks for your help, I have tried changing the design to responsive layout but that seems to create more issues with content floating all over the place when the screen size is reduced in width while responsive layout is turned on.

 

your CSS above seems to work well, locking the all the contnet to the fixed width of 960px but the Nav bar still disapears / turns into the button menu when reduced in width.

 

Any ideas on how to turn this fucntion off?

 

The site currently has this CSS running (

Please Login or Register to see this Hidden Content

)

 

body.fixed_width #page, body.fixed_width #footer, body.canvas .page-canvas {
    width960px;
}


#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 July 2013 - 09:42 AM

Hi,

 

First, scaling a regular browser is not the same as mobile view.  Visitors rarely will shrink their browsers.

 

if you look at the lower of the two images you posted above, and look particularly at the bottom of the screenshot, you'll see there's a horizontal slidebar.  When you slide it to the right, you will see the menu has in fact, converted to mobile view.  It is working correctly for mobile view.

 

Again, it is highly unusual and unlikely that anyone's going to scale down a browser in this way.

 

Your CSS is however, not correct for responsiveness.  You're using a fixed width in 960px, versus allowing the Layout Editor to make it a responsive design in percentage, which is the best method for truly responsive design.

 

I suspect that your use of that CSS is incorrect as when viewed on an Android mobile device, I'm just seeing black when visiting your site.



#7 colmdoyle

colmdoyle

    Member

  • Members
  • 15 posts
  • Country: Country Flag

Posted 19 July 2013 - 01:12 AM

Hi Rob, I dont want the site to be responsive, I simply what to disable the navbar from converting to the mobile menu when the browser is scaled down.

 

Surely this can be done?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 July 2013 - 01:57 PM

Go to Dashboard > PageLines > Site Options > Layout Editor.  Scroll down to Disable Mobile Optimized View  and check the box. 



#9 colmdoyle

colmdoyle

    Member

  • Members
  • 15 posts
  • Country: Country Flag

Posted 20 July 2013 - 07:23 AM

Hi Rob, I have already disabled mobile view, the site displays with the standard navbar on both a iPad and iPhone but the navbar still changes to the mobile style nav when the browser is scaled down

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 July 2013 - 02:48 PM

Well, the NavBar is designed to behave that way.  I doubt we'll be able to change it to suit someone shrinking a browser, not that anyone really does that.  Your other option is to switch to Nav Classic, which doesn't work the way NavBar does.    Keep in mind, NavBar was designed to be responsive to the size in which it's viewed, not the device, so if it is pushed into a narrow space, it's going to behave as if it's on a mobile device.

 

You can always style the Nav Classic similarly to the NavBar.

 

Another option is to use something like UberMenu.