Jump to content


Photo
- - - - -

Secondar Nav Background Issue

secondary nav

Best Answer Rob , 20 August 2013 - 02:57 PM

Shrinking the browser is not a way of determining how it will look in other size screens.  It will doubtlessly break things because your browser is set to meet the resolution of your monitor. There is no plague of site visitors running amuck shrinking screens that I've heard about.  So this is a non-starter. 

 

Each browser picks up the settings for the monitor from the computer's settings.  Thus if the computer is a small handheld, or a 32" monitor, your site should look consistent in all of them, which explains why I am seeing it perfectly.  Unless you're anticipating a flood of visitors with a penchant for resizing browsers, I don't think you have a thing to worry about.

 

I should point out that this issue has been discussed before.  I tested websites on multiple platforms, different browsers, different computers and different themes and they all break when shrunk down to their breaking point. This is not unique to Framework, DMS, PageLines or WordPress.  It happens on sites built in Joomla, Drupal, or with custom systems.  But as I asked others, why on earth would anyone want to do that to their screen?   I'm reminded of a story my Dad told me of a man who went to the doctor complaining of pain when he raised his right arm over his head, twisting his wrist and stood on his left foot.  The doctor said..."Well... just don't do that!"

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 monkbait

monkbait

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 11 August 2013 - 10:19 PM

Website URL: 

Please Login or Register to see this Hidden Content


Framework Version: 2.4.4
WordPress Version: 3.6
 

I cannot seem to find a way to set the background color for the Secondary Nav section.

 

I can see that #secondnav section has a dynamic height value in the DOM. But, .texture, .content and .content-pad are somehow all set to 10px?

 

If I hard set a height in CSS, it only works while the layout is full width. When I shrink the screen down to tablet or phone sized, the gap shows up again.

 
In all the other sections (header, content, footer), the .texture block gets set to the same height as the section tag. Secondary Nav does not seem to do that?
 
 

Attached Files



#2 Danny

Danny

    Is Awesome!

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

Posted 12 August 2013 - 09:33 AM

Hi,

 

Add the following this will add a white backgroudn to the second nav.

 

Please Login or Register to see this Hidden Content



#3 monkbait

monkbait

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 12 August 2013 - 01:36 PM

That sort of works, but still not right. By setting the width though, it doesn't break the text onto two lines now when the window gets smaller. The links go off screen and the background shows over the edges.



#4 Danny

Danny

    Is Awesome!

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

Posted 13 August 2013 - 10:43 AM

Try this:

 

Please Login or Register to see this Hidden Content



#5 monkbait

monkbait

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 18 August 2013 - 03:42 PM

Nope, that's not it either, that works the same as the last one. It sill puts white all the way to screen edge instead of aligning with the content blocks.



#6 Rob

Rob

    One Smart Egg

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

Posted 19 August 2013 - 07:19 PM

It looks fine now in Firefox.  Did you see this problem in another browser?



#7 monkbait

monkbait

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 19 August 2013 - 08:08 PM

I am seeing the same issue in every browser, including Firefox. You have to shrink the browser view pane down to where it hits the smallest break point. When that happens, there is extra white background that goes beyond the layout and covers the background color along the edge. So, like I said, it's better, but still not 100%.It only looks right when the browser is sized above the lowest break point. It really looks to me that the secondary nav section excludes one or more of the top level containers that all the others have. I'll be very surprised if it can actually be fixed purely with CSS.

 

I have avoided using this section on many sites we've built because of this issue. But, I really want to use it so it'd be nice if we could hash this out. It works fine if the page and content background colors are the same, but not if you have a different background color than the content.



#8 Rob

Rob

    One Smart Egg

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

Posted 20 August 2013 - 02:57 PM   Best Answer

Shrinking the browser is not a way of determining how it will look in other size screens.  It will doubtlessly break things because your browser is set to meet the resolution of your monitor. There is no plague of site visitors running amuck shrinking screens that I've heard about.  So this is a non-starter. 

 

Each browser picks up the settings for the monitor from the computer's settings.  Thus if the computer is a small handheld, or a 32" monitor, your site should look consistent in all of them, which explains why I am seeing it perfectly.  Unless you're anticipating a flood of visitors with a penchant for resizing browsers, I don't think you have a thing to worry about.

 

I should point out that this issue has been discussed before.  I tested websites on multiple platforms, different browsers, different computers and different themes and they all break when shrunk down to their breaking point. This is not unique to Framework, DMS, PageLines or WordPress.  It happens on sites built in Joomla, Drupal, or with custom systems.  But as I asked others, why on earth would anyone want to do that to their screen?   I'm reminded of a story my Dad told me of a man who went to the doctor complaining of pain when he raised his right arm over his head, twisting his wrist and stood on his left foot.  The doctor said..."Well... just don't do that!"







Also tagged with one or more of these keywords: secondary nav