Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

manage width of nav bar on tablet and phone layouts

Posted on 2013-11-26
15
Medium Priority
?
284 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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 2000 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 2000 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 2000 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

885 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