Jump to content

Archived

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

monkbait

Secondar Nav Background Issue

Recommended Posts

monkbait    1
monkbait

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

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
monkbait    1
monkbait

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

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
monkbait    1
monkbait

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
monkbait    1
monkbait

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • bobbekaer
      By bobbekaer
      Hi
       
      I am using the secondary navigation on this page: http://plo-frederiksberg.dk/ Using this CSS I would like the menu-item to turn #539baa when a page is selected. I can see the a:active is just for the "action of clicking".
       
      Looking at the main.nav I tried the a:focus but that made no difference?
       
      :-)
      Bolette
      .menu-separator { border-left: 1px solid #539baa; font-size: 16px !important; } #secondnav ul li a { color: #323232 !important; } #secondnav ul li a:hover { color: #539baa !important; } #secondnav ul li a:active { color: #539baa!important; }    
    • wavel3ngth_pl_login
      By wavel3ngth_pl_login
      I am building a new site using PageLines, and will have a main nav, which I plan on using the NavBar.   I also have a few landing pages which are separate from the website pages, but still live within the WordPress and the PageLines theme.  I want to have a NavBar which would just have one link back to the Main Site and I want it to look exactly like the main website NavBar.   Can this be done and if so, how?  I have been banging my head on this for a while now.
       
    • nfp1900
      By nfp1900
      Hi
       
      In the PL template I have assigned a Secondary Nav to the header which is adjusted to float right. I've assigned a WP menu in the Theme Locations section of Wordpress under simple-nav.
       
      However, PL doesn't populate the secondary nav with a menu choice for a new page until I choose it from the meta settings. Am I missing a trick for a default secondary nav menu to be selected for every page that is created?
       
      It's the one top right in this example:
      http://testserver.nicholaspealldesign.com/
       
      Thanks
       
      PS forgot to say that the navbar option COULD work if only there was a way of stripping out the colour option and making it nice and simple? Looks like the options are coded into the PL theme.
    • julius
      By julius
      Secondary Nav is great -
      its the only Nav that lets me assign (header-)Menu's individually for each page !!
       
      BUT its not mobile friendly
      (if I resize the browser, menue points jump to second row...)
       
      Maybe has anyone a solution to turn secondary Nav in a "mobile friendly menu" ?
      (or how to make the mobile menu plugin work with secondary Nav?)
      ????
       
      That would be awesome!
      Cheers
      Julius
    • Ben_
      By Ben_
      Hey,
       
      I have been using the secondary nav to show the child pages which has been great. My only concern is that I am not able to apply Certain CSS values to it. I have tried
       
      #secondnav
          {
          display:block;
          width:60px;
           }
       
      to make it vertical to no avail, and some of the postioning atributes are not applying. I may be useing the wrong Base theme, but when I outline it I can tell that is the one I want to use. I am assuming it is within the footer and has other attributes applied to it that are not in the #secondnav theme. I am new to this so  any help would be much appreciated!
       
      B
×