Member Avatar for mgn2683

I am having an issue with the actual height of the main site navigation. It is not up against the main header image as it should be. The url to view the problem is: Click Here

I would greatly appreciate any help looking into this, thanks!

  • 4 Contributors
  • 4 Replies
  • 133 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Building on 's observation that the branding block is affecting layout and the clarifying questions from and , here are practical diagnostics and fixes to get the navigation sitting roughly 5px beneath the header image for 's layout. The checklist below focuses on what to inspect in the browser and small, safe CSS changes that reliably produce the gap without breaking responsiveness.

Quick diagnostics (use DevTools): inspect the computed box model for the logo/title and the nav; look for default margins on headings or images, a width:100% on the logo container, or an unintentional clear/float on the nav. Temporarily toggle display:block on the header image (removes inline baseline gap) and toggle float/display:flex on the header container to see which change lifts the nav. Also check for margin collapsing between parent/child—setting a small padding or overflow:auto on the header container will show if that’s the cause (Mastering margin collapsing (MDN)).

Concrete CSS approaches (pick one that suits the existing markup):

Flexbox (recommended modern approach)

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.logo-title img { display: block; }
.main-nav { margin-top: 5px; }

Float + clearfix (classic)

.logo-title { float: left; width: auto; }
.main-nav { float: right; margin-top: 5px; }
.header::after { content: ""; display: table; clear: both; }

Inline-block alternative (if floats/flex not possible)

.logo-title, .main-nav { display: inline-block; vertical-align: top; }
.logo-title img { display: block; }
.main-nav { margin-top: 5px; }

Cautions and tips: prefer flexbox for predictable vertical alignment and responsive behavior (Flexbox (MDN)). Avoid negative margins as a permanent fix. If a float solution is used, include a clearfix (see CSS-Tricks for the classic snippet) and test at narrow widths so the 5px gap doesn’t collapse on mobile.

Recommended Answers

All 4 Replies

Member Avatar for lps

This is because your logo-title's div have take the full width and force your menu div down.

Member Avatar for mgn2683

How would I correct this issue? I need the menu div to be approx 5px under the header image.

Member Avatar for PhilEaton

Your post is kind of vague, which image is the header? The one with the Einstein quote or the one on top? And the navigation is the row of links? Sorry, just trying to understand what you want to happen.

Member Avatar for JorgeM

Can you clarify, "up against the main header", just looked at your site, current layout looks nice.

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.