Gantry 5.1.2 - Layout Block Width - css

This is a really simple question..but in Gantry 5.1.2, I'm attempting to set three block elements in the template - layout for the header in a horizontal row. From left to right:
a menu for registered members (70%) (acl registered)
login block for guests (10%) (acl public)
login block for signed in users (20%) (acl registered)
I have this configured, problem is item 1 - the menu is only visible to registered clients, it collapses causing item 2 to move to the far left as item 1 no longer takes up 70%. How can I make item 2 login block remain aligned to the right portion of the page (positioned as if the 70% menu hadn't collapsed) without using css positioning?
I've tried using spacers, but they remain once logged in. I then tried adding a transparent border and setting a width, but that will cause other issues I'd like to avoid.

There has to be a more proper way to do this, but my solution for now is to create a new menu item with a single alpha character and set it to public as a menu heading type within the client menu. Add a css class to this menu item with display: none to remove the character from the menu directory.
Seems like a silly fix for something I'm sure Gantry can handle.

You can click on the particle gear in Layout Manager and under the Block tab you can select the "Fixed Size". This will make the Login block to be fixed at 20% no matter the surrounding.

Related

Joomla 3.9: Menu item set to Separator is not clickable to reveal sub-menu items

I am building a website in Joomla, and I'm trying to make a menu in which some menu items should not have any article associated with it; clicking on them should only reveal the sub-menu items, but the rest of the page should stay static. So, I set that parent menu item to Separator, and added some sub-menu items to it. However, for some reason, the parent menu item is not clickable, meaning that I cannot reveal the sub-menu items.
Here is my website: http://vaterlinija.lt/
The parent menu item that has sub-menu items is the second one from the bottom (as you can see, it is non-clickable).
How do I fix this? I tried using Menu Header and URL (set to #) instead, but the result is the same. The only way to make these sub-menu items to show is to set that parent menu item to something like Single Article or similar, which is precisely what I want to avoid. I am using my own template, made from scratch. Do I need to add something to CSS, maybe?

z-index when nesting custom elements seems to get a new stacking context. Why?

I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.

Wordpress Genesis framework menu

There is something really strange happening with the menu on the child theme "Education" of the Genesis framework. This framework has two navigation positions: primary and secondary. As you can see here both appear one under the other in the red area. However, there is a third position that seems to be hardcoded in the child theme (?) and won't go away even if I don't assign a position to the menu.
Can you guys give me an idea what is going on? I'm not very good at this stuff. I tried looking into the child theme's code, but found nothing referencing this...
Ultumately what I want to do is use the top position (the one in the white area), but I can't, because I need to make the site multilingual, but that top position doesn't appear in the menu options, so I can't assign different menus for the different languages.
The white area at the top right is a widget area. The site already has two widgets in that Header Right widget area - a text widget (with the phone number), and a nav menu widget (the three locales).
You could make it two nav menu widgets. See Appearance -> Widgets, or use the Customizer. Alternatively, you could adjust the CSS, so that the red / grey locale 'tabs' become different looking links with a white background.
Also useful, if you do just need a single menu location there, would be the Genesis Header Nav plugin.

jump to a specific location within a page having STICKY MENU

i am trying to build a website..i am using a "sticky menu" concept which automatically minimizes its height after certain scroll..now the problem is when there is a jump within a page,the sticky menu covers half the content on jump!
for example..look at this website:
type in---"www.sitnlearnit.com" in your address bar...
in that website,when we navigate through "COURSES OFFERED" item and select any list item,we are supposed to jump to that location! it is happening..but the content is covered by sticky menu..
how to solve this???
Design the site so that the area where the sticky menu will be will never have content in it - wherever the menu moves in that space, there will never be content to cover up.

Change position to the default main menu of a theme

Maybe the question is silly, but I just start to look into Drupal and I cannot find any relatives information on the web.
I have installed a theme (corporate clean) that use a inline main navigation just after the logo and before the gallery.
I would like to change that menu position. Move the main menu on the left side.
But everytime I give to navigation or main menu block the 'navigation' position, I see a new block filled in with the same main menu links.
Instead I want the first link be relocated in the left side.
How could I do that?
(btw the theme has even a navigation block, but it cannot understand how it work exactly..)
thanks
The menu is usualy inserted in the page.tpl.php you can move it around in this file.
Alternatively you can go to admin/appearance/settings/yourTheme and turn off "Main menu" and "Secondary menu" and use the Menu block module to position menus where you want them.
Do you mean you want the main menu (that is initially in the "navigation" area, like horizontally) in a new column on the left side, like vertically?
If yes, just go in administration>structure>blocks and drag your "Main Menu" in "First Lateral Bar" area (under Content, in Coporate Clean theme). Save and check the result.
If not, do you want your Main menu just like it is now but aligned left instead of right? If yes, just play with CSS.

Resources