Solved

shortened height of nav bar

Posted on 2014-09-22
13
157 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
[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
  • 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
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!

 
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

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS for Popup in ASP.NET 4 49
Incorrect css styling in footer 3 24
CSS Odd/Even Confusion 2 42
ReadyAPI 1.9.0 2 46
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.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 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