Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

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.

Buildr - layout changes

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

Hi

I have a few (major) issues after meeting the client..the site is online on www.dakwerkencovan.be. They have their specific wishes and I'm afraid I will not be able to realize them.

the issue is mainly in the menu (see attached 1 and 2)
1: they want to white strip to be narrower in height (attachment 1 green area).
2: they want their logo to be right in the corner of the site (attachment 1 red area)
They like the menu layout when scrolling down: attachment 2. And they would like to have their logo in the left corner (permanently shown)
All menu items are "mandatory", which makes it a long menu. If I put the logo in the "logo position", the menu changes and becomes even larger in height because it's shown in 2 rows.

So now I'm trying to find a solution for these questions..The logo is shown on the first photo of the slideshow.

Hopefully someone can help me out with this!
Stefanie
Attachments:
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Stefanie,

1) You could change the padding on the logo row by removing the vertical padding on the logo row container

So this would trim a bit of vertical height off the menu
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
2) is a lot more complicated to do

With the container, the width is set for all containers and not individually

So to add more width to one container would mean making them all larger

This would mean potential changes for all the content used
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
How big does the logo have to be?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Do you have flexibility over the space between links and the menu font size?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes, that worked :-)
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
It has to be clear and visible, not really any requirements on that
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
Hm, I think I do
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
The first thing I'd test would be reducing the font size / padding between links

.zen-menu-horizontal ul a, .zen-menu-horizontal ul .zen-menu-heading {padding: 0 5px;} /* custom css file */

#menu.zen-menu.zen-menu-horizontal {font-size: 14px;} - /* change this in template settings */
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Add

.container-padding-vert-sml-normal-hor .zen-spotlight {
padding: 10px 1%;
} /* add to custom css file */
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Then you will need to add a position to the left of the menu with the logo in and see how it looks

The space available is still going to be small
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
2017-07-05_01h48_29.png



This is what I have making these changes in the browser
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I think that''ll do it for the logo space. Thank you so much, I'll try it this evening!
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
This is what I get when making the changes in the css file
Attachments:
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
Ok so now I have this, which looks better than the first attempt. The logo makes the height of the menu bigger again..It would be better to have the logo in the upper left corner (where you can see a little piece of the photo now)
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
:-)
Attachments:
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
The administrator has disabled public write access.
Cool nice one :)
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Maybe test with adding something like

#menu.zen-menu.zen-menu-horizontal ul.first-level > li { padding-top: 2em;}

to the custom css file

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul

Just got feedback of the client..they don't like it. The menu background needs to be smaller and they want their logo away from the menu (since now the logo affects the height of the menu). They sent me the logo as it needs to be shown on the site (see attachment), the red line and text also had to be visible.
I changed the position of the logo and the manu into top left and top right. Hope this is ok for them..the only thing I still need is the red line under the menu (it is now grey, although I set the border on 5px and red)
Stefanie
Attachments:
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
Last Edit: 10 months 2 weeks ago by L&s bvba.
The administrator has disabled public write access.
attachment
  • L&s bvba's Avatar
  • L&s bvba
  • LIfetime Developer - Big Bamboo
  • 197 posts
  • Karma: 0
Last Edit: 10 months 2 weeks ago by L&s bvba.
The administrator has disabled public write access.

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

Happy Campers