Solved

shortened height of nav bar

Posted on 2014-09-22
13
141 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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 to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

762 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

21 Experts available now in Live!

Get 1:1 Help Now