Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

manage width of nav bar on tablet and phone layouts

Posted on 2013-11-26
15
Medium Priority
?
280 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
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

719 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