Solved

manage width of nav bar on tablet and phone layouts

Posted on 2013-11-26
15
265 Views
Last Modified: 2013-11-27
How do I reduce the width of the navigation bar on tablet and mobile layouts?  It used to be about 1/2 the width.  Now it is way to wide.  I marked in red about the sizing i would like it to be.

p.s.  Getting it to this point has taken me about a week so don't get the idea I am sluffing off and trying to get easy fixes from y'all.  I am just burnt out and when i fix something, it seems to break something else.

http://nsitedesigns.com/nsitedesigns/wrb/test.html
http://screencast.com/t/YAA20NbB
0
Comment
Question by:nsitedesigns
  • 8
  • 7
15 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39679165
Give the LI's a set width say 200px
0
 

Author Comment

by:nsitedesigns
ID: 39679195
There are a ton of li's.  Not sure which one to modify.  Below is from the screen_styles.css

 Can you please be more specific.

nav li a:hover {
background:#133048;   /*blue*/
    }
	
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}

.nav > li > .parent {
    background-image: url("../img/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
	
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #133048;   /*blue*/
    position: relative;
    z-index:100;
    border-top: 1px solid #fff;
}

.nav li li a:hover {
background:#af995d;   /*tan*/
    }
	
.nav li li li a {
    background: #133048;   /*blue*/
    z-index:200;
    border-top: 1px solid #fff;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("../img/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39679204
.nav li {}
line 132 screen_styles.css
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:nsitedesigns
ID: 39679212
YIKES!  Now my main nav for desktop is too big.  I think that was the wrong one.
http://nsitedesigns.com/nsitedesigns/wrb/test.html
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39679243
Ok add this

.nav li li {
width:200px
}

and remove the width from .nav li {}
0
 

Author Comment

by:nsitedesigns
ID: 39679290
Sorry that didn't work. I tried to modify the screen_styles.css but it didn't work.  I then tried to add this to the screen_layout_medium.css and screen_layout_small.css but it didn't work. I am a bit confused.  

What css do I add:
.nav li li {
width:200px
}

What css do I remove the width from .nav li {}
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39679315
Ahh I see
screen_styles.css line 140
.nav > li {}

Add width:200px
0
 

Author Comment

by:nsitedesigns
ID: 39679324
Well that helped a little  I still have a wide area in tan that I need to reduce.  Any ideas?

http://screencast.com/t/ZMTjPhLlAYbe
http://screencast.com/t/FJE8hoQz
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39679330
The background for that whole area is that colour - it's not the menu
.nav_container line 10 screen_layout_medium.css
Change the bg color to #EDEADD
0
 

Author Comment

by:nsitedesigns
ID: 39680803
Well, that actually fixed another problem I was having with the dark tan bar around the menu button.  But i am still having problems when you click on the menu button itself.  

http://screencast.com/t/ZMTjPhLlAYbe
http://screencast.com/t/FJE8hoQz
0
 

Author Comment

by:nsitedesigns
ID: 39681352
Can anyone help me?  Trying to manage the size of the menu when you click on the blue menu button on  mobile view.  Right now, the dark tan extends too far.  I want it to end where the lines end.  Here is a screen shot of how I would like it to display

http://screencast.com/t/Tc5let8keY
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39681439
Add to screen_layout_medium.css
.nav {
 width:200px
}
0
 

Author Comment

by:nsitedesigns
ID: 39681490
Tablet view is fine.  I am trying to fix mobile view.  I added this to the screen_layout_small.css file and it fixed it - thanks!  

I tried to bump the drop downs to the right a bit by adding margin-left:10px to .nav on scren_layout_small.css but that messed up the entire drop downs.  Ugh!  How to I shift the drop down (Practice through Home buttons) over so they line up with left edge of blue Menu button?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39681507
screen_styles.css line 27 change the UL margin to 40px
0
 

Author Closing Comment

by:nsitedesigns
ID: 39681564
yippeeee  skipppy!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question