• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

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

C

Copenhagen69

Diamond Member
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!


attachment.php
 
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.
 
If this is the right section it looks like ...




Code: 
/*-------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;
 
That's the style sheet. Can you also post the markup for the page, or at least the header and nav bar portions?
 
Markbnj said:
That's the style sheet. Can you also post the markup for the page, or at least the header and nav bar portions?
Click to expand...

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 ...

Code: 
/*--------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;
}
 
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.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top