Solved

shortened height of nav bar

Posted on 2014-09-22
13
146 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

896 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

17 Experts available now in Live!

Get 1:1 Help Now