Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

menu in header

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

12 years 10 months ago
Hi,

I am just starting with this framework and not exactly an expert in php.

I am trying to build a simple site and firstly working on the header and main navigation.

I have attached and images of this top portion of the site

header.gif



What I need is to next the menu in the bar below the header.

Could someone give me some pointers please :-)

Cheers,
Kevin.
  • Spionred's Avatar
  • Spionred
  • 12 Month basic
  • 32 posts
  • Karma: 0
The administrator has disabled public write access.
12 years 10 months ago
Hi Kevin,

Just publish a menu module to the menu position. menu is directly under the header row.

:)
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
12 years 10 months ago
Hi,

That pushed the menu under the bar. The reason the bar is in the header is due to the logo crossing into it.

Any thoughts?

Cheers,
Kevin.
  • Spionred's Avatar
  • Spionred
  • 12 Month basic
  • 32 posts
  • Karma: 0
The administrator has disabled public write access.
12 years 10 months ago
Hi Kevin,

You can just add a negative margin to the #nav div, pushing it upward....

;)
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
12 years 10 months ago
Is it possible to slice the header up and put the bar (with the overlapping bit) as the background of the menu module? Where would I set the background for the menu position?

This could work if there is no gap between the header and the menu. What do you think?
  • Spionred's Avatar
  • Spionred
  • 12 Month basic
  • 32 posts
  • Karma: 0
The administrator has disabled public write access.
12 years 10 months ago
Will give that a go

Cheers.
  • Spionred's Avatar
  • Spionred
  • 12 Month basic
  • 32 posts
  • Karma: 0
The administrator has disabled public write access.
12 years 10 months ago
tried this in the theme.css file:

#nav { margin-top: -20px;
color:#FFF}

But the menu just disappears.
  • Spionred's Avatar
  • Spionred
  • 12 Month basic
  • 32 posts
  • Karma: 0
The administrator has disabled public write access.
12 years 10 months ago
You may need to use CSS positioning to achieve what you want. Example:
#logo {
   position: relative;
   z-index: 10;
   ...
}
#nav {
   position: relative;
   top: -30px;
   margin-bottom: -30px;
   z-index: 5;
   ...
}
The higher z-index value determines which item will be on top, and requires the position property to be defined (relative, absolute, or fixed). The top property will determine how far the item will shift from the top. A value of -30px will move the navigation up 30px. The margin-bottom is set to the same as top, because position: relative will shift the element but leave the space where it would normally be.
  • Atomic Design and Consulting's Avatar
  • Atomic Design and Consulting
  • 3 Month Basic
  • 43 posts
  • 1 Thanks
  • Karma: 2
Last Edit: 12 years 10 months ago by Atomic Design and Consulting.
The administrator has disabled public write access.
12 years 10 months ago
Yep that sounds about right - thanks @Atomic :)
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close