What piece of code am I looking for? (pic inside)

[Copenhagen69]

I am trying to lower the nav bar, but dont know much about CSS. So I was wondering what type of code I am looking for to adjust the nav bar and lower it some.

any ideas?


Thanks ahead of time!

[Markbnj]

Hard to say without seeing the current markup and styles. Look in the markup and see what inline styles or stylesheet rules apply to the div that contains the "Drew and Lacey" header. Maybe it has a fixed height that is too small, but there are other possibilities. Best thing is to post the relevant pieces.

[Copenhagen69]

If this is the right section it looks like ...

/*-------navigation-------*/
#nav {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  text-transform: uppercase;
  width: 100%;
  z-index: 1500;
}
#nav h2 {
  display: none;
}
#nav ul {
  float: left;
  padding: 16px 0;
}
#nav ul li {
  background: transparent url(../images/navspace.jpg) no-repeat 100% 50%;
  display: inline;
  font-size: 1em;
  padding: 9px 14px 9px 10px;
  list-style: none;
  margin: 0;
  position: relative;
}
#nav ul li.last {
  background: none;
}
#nav ul li a {
  color: #fff;
  padding: 9px 17px 15px;
  text-shadow: 0px -1px 1px #000;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}
#nav ul li a:hover,
#nav ul li a.active {
  color: #EF9F20;
}
#nav ul li.expanded a:hover,
#nav ul li.expanded.hover a {
  background: transparent url(../images/navbg.jpg) repeat-x 0 0;
}
#nav ul li ul {
  color: #fff;
  display: none;/*  make sure the submenus aren't visible on load */
  font-size: 0.95em;
  left: 0.95em;
  line-height: 2.5em;
  padding: 0;
  position: absolute;
  top: 2.4em;
  width: 15em;
}
#nav ul li.hover ul {
  display: block;
}
#nav ul li.hover ul li ul,
#nav ul li.hover ul li.hover ul li ul {
  display: none;
}
#nav ul li.hover ul li.hover ul,
#nav ul li.hover ul li.hover ul li.hover ul {
  display: block;
}
#nav ul ul li {
  background: #0b0b0b url(../images/dd-space.jpg) repeat-x scroll 0 100%;
  display: block;
  line-height: 2.5em;
  margin: 0 !important;
  padding: 0;
  position: relative;
  text-align: left;
  width: 15em;
}
#nav ul ul li.last {
  background: #010101;
}
#nav ul li.expanded ul li.expanded a,
#nav ul li.expanded ul li.expanded ul li.expanded a,
#nav li.expanded ul li.expanded a:hover,
#nav li.expanded ul li.expanded ul li.expanded a:hover {
  background: transparent url(../images/ddplus.gif) no-repeat 92% 50%;
}
#nav ul li.expanded ul li a,
#nav ul li.expanded ul ul li a,
#nav ul li.expanded ul ul ul li a,
#nav ul li.expanded ul li.expanded ul li a,
#nav ul li.expanded ul li.expanded ul li a:hover,
#nav ul li.expanded ul li.expanded ul li.expanded ul li a,
#nav ul li.expanded ul li.expanded ul li.expanded ul li a:hover,
#nav li.expanded ul li.expanded li a:hover {
  background: transparent;
  display: block;
  height: auto;
  padding: 2px 15px;
}
#nav li.expanded ul li a:hover,
#nav li.expanded ul ul li a:hover {
  background: transparent;
  color: #EF9F20;
  padding: 2px 15px;
}
#nav li .expanded ul {
  margin: -2.7em 0 0 16em;
}
#nav .block {
  margin: 0;

[Markbnj]

That's the style sheet. Can you also post the markup for the page, or at least the header and nav bar portions?

[Copenhagen69]

Originally Posted by Markbnj

That's the style sheet. Can you also post the markup for the page, or at least the header and nav bar portions?

It is a theme I picked up for my drupal site ... Where would the markup page be located?

here is there header and nav section ...

/*--------header--------*/
#header-top {
  color: #999;
  padding: 3px 20px;
  height: 18px;
}
#header-top #member-login {
 color: #333;
 float: right;
}
#header-top a {
  color: #999;
  text-decoration: none;
  padding: 0 3px;
}
#header-top a:hover {
  color: #333;
  text-decoration: underline;
}
#header {
  height: 159px;
  position: relative;
}
#header a {
  color: #222;
  text-decoration: none;
}
#logo {
  padding: 16px 0 0 20px;
}
#logo img {
  float: left;
}
#logo h1#site-name {
  width: auto;
}
#logo h1#site-name a {
  font-size: 1.9em;
  float: left;
  font-weight: lighter;
  padding: 17px 0 0 10px;
  letter-spacing: 1px;
}
/*-------navigation-------*/
#nav {
  bottom: 0;
  padding-top:50px;
  display: block;
  left: 0;
  position: absolute;
  text-transform: uppercase;
  width: 100%;
  z-index: 1500;
}
#nav h2 {
  display: none;
}
#nav ul {
  float: left;
  padding: 16px 0;
}
#nav ul li {
  background: transparent url(../images/navspace.jpg) no-repeat 100% 50%;
  display: inline;
  font-size: 1em;
  padding: 9px 14px 9px 10px;
  list-style: none;
  margin: 0;
  position: relative;
}
#nav ul li.last {
  background: none;
}
#nav ul li a {
  color: #fff;
  padding: 9px 17px 15px;
  text-shadow: 0px -1px 1px #000;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}
#nav ul li a:hover,
#nav ul li a.active {
  color: #EF9F20;
}
#nav ul li.expanded a:hover,
#nav ul li.expanded.hover a {
  background: transparent url(../images/navbg.jpg) repeat-x 0 0;
  
}
#nav ul li ul {
  color: #fff;
  display: none;/*  make sure the submenus aren't visible on load */
  font-size: 0.95em;
  left: 0.95em;
  line-height: 2.5em;
  padding: 0;
  position: absolute;
  top: 2.4em;
  width: 15em;
}
#nav ul li.hover ul {
  display: block;
}
#nav ul li.hover ul li ul,
#nav ul li.hover ul li.hover ul li ul {
  display: none;
}
#nav ul li.hover ul li.hover ul,
#nav ul li.hover ul li.hover ul li.hover ul {
  display: block;
}
#nav ul ul li {
  background: #0b0b0b url(../images/dd-space.jpg) repeat-x scroll 0 100%;
  display: block;
  line-height: 2.5em;
  margin: 0 !important;
  padding: 0;
  position: relative;
  text-align: left;
  width: 15em;
}
#nav ul ul li.last {
  background: #010101;
}
#nav ul li.expanded ul li.expanded a,
#nav ul li.expanded ul li.expanded ul li.expanded a,
#nav li.expanded ul li.expanded a:hover,
#nav li.expanded ul li.expanded ul li.expanded a:hover {
  background: transparent url(../images/ddplus.gif) no-repeat 92% 50%;
}
#nav ul li.expanded ul li a,
#nav ul li.expanded ul ul li a,
#nav ul li.expanded ul ul ul li a,
#nav ul li.expanded ul li.expanded ul li a,
#nav ul li.expanded ul li.expanded ul li a:hover,
#nav ul li.expanded ul li.expanded ul li.expanded ul li a,
#nav ul li.expanded ul li.expanded ul li.expanded ul li a:hover,
#nav li.expanded ul li.expanded li a:hover {
  background: transparent;
  display: block;
  height: auto;
  padding: 2px 15px;
}
#nav li.expanded ul li a:hover,
#nav li.expanded ul ul li a:hover {
  background: transparent;
  color: #EF9F20;
  padding: 2px 15px;
}
#nav li .expanded ul {
  margin: -2.7em 0 0 16em;
}
#nav .block {
  margin: 0;
}

[SockHaser]

Originally Posted by Copenhagen69

... Where would the markup page be located?

That would be the html portions of the navigation area, hence HyperText Markup Language

[Ken g6]

This Is Sparta Drupal! It generates its HTML from deep in cryptic PHP functions. You shouldn't be fiddling with the markup.

In my experience, the theme is generated from within sites/all/themes, though there could be another path being used. Find your theme, then look at the CSS folder within it. There will probably be many CSS files.

Next, you need to find the IDs or classes being used to identify the part of the page you want to modify. Try pressing the F12 key while looking at the page in your browser. If this produces a section with a magnifying glass or arrow pointer button, click that. Then highlight the area you want to inspect and click it. That should give you some idea of the elements you want to modify.

Note: if the above doesn't work, http://getfirebug.com/ and try again.