Solved

manage width of nav bar on tablet and phone layouts

Posted on 2013-11-26
15
260 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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now