Solved

manage width of nav bar on tablet and phone layouts

Posted on 2013-11-26
15
275 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

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.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

630 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