Member Avatar for saucy6969

hi there,
This is my first go doing a wordpress site and its causing me some confusion. I know how to create all the pages I need and thats going smoothly. I cant seem to get the main navigation buttons in my header to move...expand...anything really except line up in a row and look ugly (as you can plainly see).

Anyone know how to move things around (to create dropdowns) or just minimise the amount of stuff there..only want HOME, PROUCTS and a few others I am going to make. (and have the whole box gray)? It's driving me crazy!

any help is greatly appreciated!

  • 2 Contributors
  • 1 Reply
  • 191 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by london-G

Dani AI

Generated

A compact, practical fix for ’s Sellya header/nav issues (expanding on the simple pointer from ):

The WordPress Menus screen (Dashboard → Appearance → Menus) is the place to build a compact header. Create a new menu, add Home and a Products parent item, then place product pages slightly indented underneath to form dropdowns. Use Custom Links for external or placeholder entries. Finally, assign the menu to the theme’s primary/header menu location and save — only pages added to that menu will appear, so unwanted items disappear automatically.

Common causes when dropdowns still don’t appear:

  • The submenu HTML (a nested <ul class="sub-menu">) is missing or never printed. Confirm in the browser inspector whether nested <ul> elements exist.
  • The submenu exists but is hidden by CSS or clipped by an ancestor with overflow: hidden.
  • JavaScript that handles animated dropdowns is broken or not enqueued; check the console for errors and temporarily disable caching/minification plugins during testing.

A small CSS starter to force basic dropdown behavior and a gray header (replace selectors to match the theme’s classes; add via Appearance → Customize → Additional CSS or a child theme):

/* header background */
.site-header, .header, .main-navigation, #header {
  background-color: #d0d0d0;
}

/* basic dropdown visibility */
.main-navigation ul li { position: relative; }
.main-navigation ul li ul { position: absolute; left: 0; top: 100%; display: none; z-index: 9999; }
.main-navigation ul li:hover > ul { display: block; }

/* prevent clipping */
.header, .site-header, .nav-wrap { overflow: visible; }

Cautions: edit via a child theme or Additional CSS, clear caches after changes, and keep mobile menu behavior in mind (mobile often uses a different script/style).

Member Avatar for london-G

Appearence => Menu should help you find your way

Edited by london-G
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.