Member Avatar for mgn2683

Hello, I am trying to get my 'logo' (which is just css text based) to be level as my navigation. I am having trouble with this, it is always above my navigation. I'd like my logo to be left, and the navigation right. I'm sure its something very simple, a link to view this is:

I'm also having issues trying to get a little triangle (spike.gif) to appear under the link of a current page. For instance, it won't appear on rollover, but just when someone is on a certain page. I've enclosed a link to an image of how I'd like to do this.

Can anyone help me with either of these issues? Any help is greatly appreciated!

  • 3 Contributors
  • 3 Replies
  • 208 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mgn2683

Dani AI

Generated

A quick diagnosis and two practical fixes tied to the replies already in the thread. ’ padding tweak can shift vertical spacing, and was right that floats place items left/right — but neither guarantees the logo and links share the same vertical alignment because browsers use line-height and display context to calculate baselines.

Modern, robust fix (recommended): put the logo and nav in the same header container and use Flexbox to center vertically and push the nav to the right. This removes fragile manual padding and is resilient to font-size changes.

.header {
  display: flex;
  align-items: center;      /* vertically centers logo and nav */
  justify-content: space-between;
  height: 60px;             /* set to whatever header height is needed */
  padding: 0 20px;
}
.header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

Legacy fallback: if Flexbox is not an option, make the logo and nav display: inline-block and set vertical-align: middle on both. Give the header a fixed height or matching line-height so both sit on the same baseline.

To place the small triangle under the active link, add a persistent .current (or .active) class to that link and use a CSS pseudo-element positioned from the link:

nav a.current { position: relative; padding-bottom: 8px; }
nav a.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

Troubleshooting notes: reset nav ul margins (margin:0; padding:0), ensure anchors are inline-block if needed, check for overflow:hidden or z-index that might clip the triangle, and verify the active class is actually applied (server-side or JS). These steps address the alignment problem more reliably than fiddling with a single padding value.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Change the padding-top of the #menu ul li

Member Avatar for Acute

Are you using div tags positioning? If so, use float left and float right properties in your css.

Member Avatar for mgn2683

I changed the padding top of

#menu ul li

and it didn't get it to the same level...anyone have other ideas??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.