Menu at Bottom Option; Bottom Alignment?

Resolved permaea
(@permaea)

9 years, 2 months ago

Hi terrathemes,

Kudos for your fine theme which has a nice balance of options and a generally well-thought-out feel.

For your reference, my formative site is here:
http://permaea.altervista.org/
(You may leverage its layout and copyright-free images if you wish, incidentally, as promo for Meteorite)

Some questions…

1. When choosing viewport option for header image, and menu below the header, the menu goes below the viewport’s horizon of course and therefore off the screen. That said, would it be possible to have the same setup, only with the menu’s bottom aligned with either the bottom of the viewport or header image? That way, it wouldn’t be a mystery-menu until the user scrolled down or hit the down-triangle/arrow button.

2. The background of the contact form send button, as well as the back-up button/arrow on the lower-right of screen that appears when scrolled to bottom of a longer page, seems to inherit a main-text color or something, so if it is white, elements of the buttons disappear. (Hovers make them visible, though).

3. Could there be a no-background or 100% transparent-background option for the footer, as well as an option to have it bottom-sticky, if it makes sense to have? I suppose I could use an old trick to make it transparent by using a transparent background image on it, but that’s a very old trick.

4. The padding set to 0 between the header/menu and the title of the page still seems to have a gap.

I will slowly try to resolve things, but in the mean time, if you might be inclined to an update and/or suggestions, it would certainly be appreciated.

Thank you.

Viewing 9 replies - 1 through 9 (of 9 total)

Thread Starter permaea
(@permaea)

9 years, 2 months ago

Edit/correction: The 0 padding between the top of the title of the page and bottom of header does seem to work when there is sufficient text filling the space.
salsaturation
(@salsaturation)

9 years, 2 months ago
Hi @permaea

Try this in your custom css area or child theme css
```
.upbutton i, .scroll-to-top:focus .upbutton,
.scroll-to-top:hover .upbutton  {
    color: #333;
}

.site-footer {
    background-color: transparent;
	color: #fff;
}

@media only screen and (min-width: 992px) {
.home .header-area, .home .header-image {
    min-height: auto;
    max-height: calc(100vh - 130px);
}
}
```
Thread Starter permaea
(@permaea)

9 years, 2 months ago

Hi salsaturation,

Thank you very much for your CSS. Everything works a charm, except, however, with the last part (the menu) which only seems to work on the first/front page; with the other pages it’s still off the screen.

Thread Starter permaea
(@permaea)

9 years, 2 months ago

Hi All,
I also noticed that if you scroll down to the Comment form on this page…

http://permaea.altervista.org/contact/

…the ‘Send’ button is still whitened-out.

In any case, I’m generally pleased with the theme and how the site is shaping up and will continue to try to learn as much as possible in its regard and if it helps, let you know of any bugs and whatnot along the way.

Incidentally, Permaea is yours as well, and is a grass-roots ‘green anarchy’ and/or permaculture endeavor for everyone and fellow creatures of the planet.

Thanks again and happy camping.

~ Caelan
Theme Author terrathemes
(@terrathemes)

9 years, 2 months ago
Hello @permaea,

use this CSS to style all your buttons you may have.
```
button, input[type="button"], input[type="reset"], input[type="submit"] {
  color: #333;
}
```
The button is whitened-out because you choosed white as the primary color which is normally the color of the buttons.

If you maybe want the submit button in a new row, you can apply this CSS code. Feel free to change the width to 100% if you want the URL field to be full width.
```
.comment-form-email, .comment-form-url {
  float: none;
  width: 50%;
}
```
the last part (the menu) which only seems to work on the first/front page;

Remove the “.home” from the CSS @salsaturation gave you. This will apply the CSS not only to the front page. The code should looks like this.
```
@media only screen and (min-width: 992px) {
  .header-area, .header-image {
    min-height: auto;
    max-height: calc(100vh - 130px);
  }
}
```
And @salsaturation, thank you very much for your assistance.
- This reply was modified 9 years, 2 months ago by terrathemes.
Thread Starter permaea
(@permaea)

9 years, 2 months ago

Hi @terrathemes,

Thank you kindly for your CSS code. The first two work fine, although the last bit still leaves the menu below the viewport/off-screen, including again, the front page. So I have reverted back to @salsaturation’s ‘frontpage fix’ until the other pages can be figured out.

For what it’s worth, if this helps, I am using a Child Theme of Meteorite 1.4, and don’t seem to have access in the Child’s editor of its CSS and PHP like I did with the Parent. Apparently it’s an external referral to Parent’s CSS, yes? So I presume that the Child’s Customizer CSS overrides it/is prioritized over Parent’s yes? Because that is where I have placed your and salsaturation’s CSS.

But perhaps I am not putting it/yours in the right place? In any case, salsaturation’s CSS in the Customizer’s area for CSS does work for the menu on the front page in aligning its bottom with the header image’s and viewport’s bottom.

Understood about the white chosen as primary color, but it so far seems the way to get the menu text to be white to designate current-page and upon mouseover of the menu item. To have the same control over the color of a particular section of text– the menu– be appended also to an element– the back-up arrow– seems somewhat counterintuitive, but I imagine there’s some underlying logic in any case. At the same time, though, it does make me wonder about Christophe’s issue.

~ Caelan

Thread Starter permaea
(@permaea)

9 years, 2 months ago

By the way,
I really like how, when you select the search magnifying glass with the menu lying on the bottom, the menu gets pushed up just enough to reveal the search input field.
It makes me wonder what will happen with nested menus. Will they pop up or down, pushing the menu up? ‘u’
Theme Author terrathemes
(@terrathemes)

9 years, 2 months ago
Hello @permaea,

the reason why it is working only for the front page is because how CSS behaves. The rule salsaturation gave you meant “the class header-area inside of the class home and the class header-image inside the class home”. That has a specific weight. The rule I gave you was targeting only the class header-area and header-image. Its weight is less than if the classes have to be inside the class home.
This should solve the problem and work for all pages:
```
@media only screen and (min-width: 992px) {
  .header-area, .header-image {
    min-height: auto !important;
    max-height: calc(100vh - 130px) !important;
  }
}
```
The navigaion items can be colored through the customizer in the color section under Header > Toplevel Menu items. However the hover color is indeed styled with the primary color. But with a bit of CSS it could have been achieved, too. Nonetheless it’s working now, that’s all.

Selecting the search is pushing the menu up because the field, which isn’t in the screen without scrolling, gets focused. Nested menus wouldn’t be visible or pushing up the menu because only their oppacity gets changed. That would achieve some custom javascript for sure which I can’t provide.
Thread Starter permaea
(@permaea)

9 years, 2 months ago
Hi @terrathemes,

Thank you very much for your new code. It works perfectly and goes some ways toward lending a simple, fluid, (though not too fluid with parallax ‘all over the place’, so to speak) ergonomic and pleasing layout. I like how the menu at the bottom helps to ‘ground’ the site and add more info without clutter, as well as ‘introduce’ or ‘sweep’ the ‘transition’ into the next section.
I tried quite a few themes, incidentally, including with, less commonly, menus on or near the bottom as preferred– including WordPress’ own Twenty Seventeen– to less avail, and was getting quite weary and dissatisfied until Meteorite came along and ‘hit’ me, such as with its subtle yet effective ‘kit of integrations’, minus kludge or $-begs.

Thanks, too, for the added information and insight regarding CSS and so forth, it’s appreciated, and of course might add in helping others who might arrive later to read the threads.

~ Caelan
- This reply was modified 9 years, 2 months ago by permaea.
- This reply was modified 9 years, 2 months ago by permaea.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Menu at Bottom Option; Bottom Alignment?’ is closed to new replies.