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
Solved

shortened height of nav bar

Posted on 2014-09-22
13
152 Views
Last Modified: 2014-09-22
I can't figure out how to reduce nav bar height.  The nav bar is part of a paid nav bar generator so some of the code is not familiar to me. When I lowered the height in the below code, it goofed up the nav bar.  Any help would be appreciated.

#cssmenu {
  width: auto;
  height: 58px;
  padding-bottom: 4px;
}

http://nsitedesigns.com/nsitedesigns/uli/index.html
http://nsitedesigns.com/nsitedesigns/uli/styles.css
0
Comment
Question by:nsitedesigns
  • 7
  • 6
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40337090
This would require a lot of changes to the CSS - can you not do this in the program itself?
0
 

Author Comment

by:nsitedesigns
ID: 40337115
Could not find any way to modify this in the program.  I know - weird huh.  Attempts to contact company have not been successful.  : (

I guess it will be "good enough".

Thanks.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40337118
Well this was as far as I got, but still not finished

#cssmenu - styles.css line 15 - remove the height

#cssmenu #bg-four - line 63 - remove the height

#cssmenu ul - line 69 - remove the height

#cssmenu ul li a - line 81 - change the padding to 10px 23px

#cssmenu ul li - line 74 - add margin-top:20px

#cssmenu #bg-two, #cssmenu #bg-three and #cssmenu #bg-four - change the height to 40px


If you want to implement those changes (keeping a backup) I'll have another look
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 58

Expert Comment

by:Gary
ID: 40337181
What program is it you are using?
0
 

Author Comment

by:nsitedesigns
ID: 40337316
There was no height under bg-four.  Did you wnat me to add it?  Or, did you want me to modify bg-one?

#cssmenu #bg-four {
  bottom: 4px;
  z-index: 4;
  background: url('bg.png');
}

The work you suggested did shortend the height.  Yippee!  Only problems I see now is that the nav bar is cutting into logo and you can't see nav button names.  Getting there!

The program is called:
http://cssmenumaker.com/
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40337337
Add overflow:auto to #cssmenu {}

In #cssmenu ul li {} remove the margin-top:20px
0
 

Author Comment

by:nsitedesigns
ID: 40337413
Hot dang you are good!  Only problem now is that I need the last button to be first.  The order got messed up.  It should begin with PreMedia and end with Home.  (this is what I ran into when trying to fix on my own).

http://nsitedesigns.com/nsitedesigns/uli/index.html
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40337422
In #cssmenu ul li {} change the float to left (though that is an usual place for Home)
0
 

Author Comment

by:nsitedesigns
ID: 40337443
That did it!  

I was taught over 10 years ago, to put the home on the right or bottom of the nav bar.  The rationale was that when people visit your site, they normally enter it via the home page.  So right from the get-go they have to skip the first button on your nav bar.  

Maybe that isn't good logic but it makes sense to me....
0
 

Author Closing Comment

by:nsitedesigns
ID: 40337446
A++++!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337452
Most people just use the logo as a link to the home page and remove it from any nav menu completely.
0
 

Author Comment

by:nsitedesigns
ID: 40337484
You'd be surprised how many people I run into don't know that!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337502
It's a commonly accepted action to click the logo to go to the home page for visitors - at least it is for most websites.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 34
CSS issue in Nested Master Pages 9 25
Little bit of help styling my heading 3 30
Flex container exceeding stated width in IE11 4 14
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

790 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