• 0

Secondar Nav Background Issue


Question

Posted · Report post

Website URL: http://isaac.2acrestudios.com/about-us/who-is-isaac/
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?
 
 

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

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!"

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

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

 

#site .section-secondnav {
background-color: #FFF;
margin: 0 auto;
width: 1100px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try this:

 

#site .section-secondnav {
  background-color: #FFF;
  max-width: 1100px;
  margin: 0 auto;
}
 
@media screen and (max-width: 800px) {
  .responsive #site .section-secondnav .content, .responsive.fixed_width #page {
    width: 97%;
  }
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now