Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 174
  • Last Modified:

shortened height of nav bar

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
nsitedesigns
Asked:
nsitedesigns
  • 7
  • 6
3 Solutions
 
GaryCommented:
This would require a lot of changes to the CSS - can you not do this in the program itself?
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
GaryCommented:
What program is it you are using?
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
Add overflow:auto to #cssmenu {}

In #cssmenu ul li {} remove the margin-top:20px
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
In #cssmenu ul li {} change the float to left (though that is an usual place for Home)
0
 
nsitedesignsAuthor Commented:
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
 
nsitedesignsAuthor Commented:
A++++!
0
 
GaryCommented:
Most people just use the logo as a link to the home page and remove it from any nav menu completely.
0
 
nsitedesignsAuthor Commented:
You'd be surprised how many people I run into don't know that!
0
 
GaryCommented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now