Hello, I'm trying to place the "adaptive menu magic menu" in the example layout of "Harmony Layout Basics" within the masthead in a horizontal version (at the same height as the logo). Unfortunately I don't succeed; the menu keeps slipping under the inserted logo. Is there an option to anchor the horizontal menu in the masthead?
Adaptiv Menu Magic inside a horizontal masthead ...
(11 posts) (4 voices)-
The Harmony Layout Basics page has a one column, 100% width header. You'll need to add another column right after the first one. Then set the first column (that contains the logo) to 20% width and set the new column to 80% width. Now you can insert the AMM menu into the second (80%) column. Bot the first and second columns will now be on the same row.
Posted 2 weeks ago -
Hi Gerry,
thanks for your prompt answer. The following page illustrates the problem: https://holgerhedrich.de/Harmony_Layout_Basics/index.htm ; the logo is obscured by the navigation, although the logo is in the 20 percent area and the navigation is in the 80 percent area. Is there maybe a solution?Posted 2 weeks ago -
choreo
offlineMemberHi Gerry,<br />
thanks for your prompt answer. The following page illustrates the problem: https://holgerhedrich.de/Harmony_Layout_Basics/index.htm ; the logo is obscured by the navigation, although the logo is in the 20 percent area and the navigation is in the 80 percent area. Is there maybe a solution?Sounds like you are trying to do something similar to this?
https://www.bearpipe.comPosted 2 weeks ago -
Hi Gerry,<br />
the logo is obscured by the navigation, although the logo is in the 20 percent area and the navigation is in the 80 percent area. Is there maybe a solution?Yes, the issue is being caused by the position:fixed in the masthead rule, we'll need to adjust that:
1. Open the custom.css style sheet and locate the masthead rule at line 5:
.masthead {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}Change the fixed to sticky so it now looks like this:
.masthead {
position: sticky;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}2. Locate the body rule at line 18:
body {
padding-top: 106px;
}Change it to this:
body {
padding-top: 0px;
}3. Save and close the style sheet.
4. Now we'll need to move the 'masthead' class from the content divs to the Grid User Class:
-Open the HMY Modify interface and remove the masthead from the Content User Class for each of the two sections.
-Now enter masthead into the Grid User Class
5. Click OK to close the interface and apply the changes.
That should get it to display properly, in fact, it should display similar to the example choreo posted... thanks choreo!
Posted 2 weeks ago -
Hi Gerry, hi choreo,
Thanks for your advice; it works great; I would also incorporate a small wish: the logo shouldn't disappear when scrolling upwards. In the meantime, I have also bought the "Zeitgeist" page pack and noticed that the logo remains there. Thank you very much for your effort.
Kind Regards HolgerPosted 2 weeks ago -
Sinclair
offlineMemberIf Choreo wanted to he could introduce a rule like so.....
#p7HMY_1 {position:sticky; top:0; z-index:99;}
In his page he has multiple grids, the first grid, #p7HMY_1, houses the logo and menu columns, so the whole of that grid will get the sticky treatment, you could do similar, Zeitgeist also uses this technique!
See the header rule in the p7Zeitgeist-01.css stylesheet...
.header {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 10;
box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
}HTH
Posted 2 weeks ago -
choreo
offlineMemberIf Choreo wanted to he could introduce a rule like so.....
#p7HMY_1 {position:sticky; top:0; z-index:99;}
In his page he has multiple grids, the first grid, #p7HMY_1, houses the logo and menu columns, so the whole of that grid will get the sticky treatment,Thanks - I will check that out!
Posted 2 weeks ago -
See the header rule in the p7Zeitgeist-01.css stylesheet...
.header {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 10;
box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
}
HTHHi Sinclair,
I bought the "Zeitgeist" PagePack, but I am interested in the correct position of the header in the basic layout page. Where should the "header" be placed or does the header have a different name on the layout basic page? Thank you very much for your efforts.
Kind Regards HolgerPosted 2 weeks ago -
Sinclair
offlineMemberHi,
You could look at/copy this page, this is a partly configured layout basic page, mainly focusing upon the header rather than following the tutorial verbatim.
http://www.petitesites.co.uk/Harmony-Layout-Basics/
If you 'Modify' the top grid (which houses the logo and menu) you'll see that it comprises of 2 columns and is slightly different in that the header class is applied to that particular grid thereby the grid is given the sticky treatment.
You can set things out your way for the second grid per the tutorial!
HTH
Posted 1 week ago -
Hi,
You could look at/copy this page, this is a partly configured layout basic page, mainly focusing upon the header rather than following the tutorial verbatim.
http://www.petitesites.co.uk/Harmony-Layout-Basics/
If you 'Modify' the top grid (which houses the logo and menu) you'll see that it comprises of 2 columns and is slightly different in that the header class is applied to that particular grid thereby the grid is given the sticky treatment.
You can set things out your way for the second grid per the tutorial!
HTHHi Sinclair,
Thanks for the link; the solution in the header area is brilliant; works absolutely perfectly. Thank you very much for your efforts.
Sincerely, HolgerPosted 1 week ago
Reply
You must log in to post.