carobina

For anyone reading this, because researching what Browser Developers tools are took me quite a while (since most of them address css and stuff, which I knew already): “firefox responsive design mode” helped me.

On firefox one can get into responsive design mode by Ctrl + Shift + M. Then one can choose different tablet and smartphone types, make up dimensions yourself and toggle between portrait and landscape mode.

Works like a charm, thanks ??

Best theme & team ever, free and pro version ??

On a desktop and maybe on the landscape version of mobile, but not on the portrait versions of tablet and mobile…

Yes, that would be perfect ??

Ahh *lightbulb*

Thanks so much, David, for the quick response!

And good to know for the future ??

Hi @fernandoazarcon2, thanks for your help!

Still gave me the same error message when activating the snippet:
Uncaught Error: Undefined constant “‘generate_inside_navigation’” in this snippet…

But because I thought you must know what you’re doing and your code is probably right, this time I understood, why, it was a silly reason: I had used the wrong ‘, they were slightly italic. Whereever they came from, once I typed it in again with the normal ‘ everything was hunkydory.

Everything’s fine now, so thank you very much for your answer and for taking the time ??

• This reply was modified 1 year, 9 months ago by carobina.

Wow, it worked! Magic ?? Thanks so much, really ??

But before asking for the pro login, could you please help with the transparency problem? Or should I make that a new topic?
I think they are connected: if I comment out the part

.inside-navigation {
margin-top: -55px;
}

both features work, the navigation bar color one as well as the stickyness of the navigation.

But maybe there is a better way to tell the navigation the new place?

PS: I uncommented the color part, just in case, and added opacity as well, with no luck

.main-navigation {
	background: rgba(34, 34, 34,1) !important;
}

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Yes, but I did the commenting after testing. Don’t want to have code hanging in there that does not do anything but may affect stuff later (I’m new to all that, didn’t know php before, so just being cautious).
The transparency really does not react to anything.

For the sticky nav: sorry, I can ask the person responsible for the webspace to give me access to the pro login, if you wish. Though I’m not sure if the problem is sitting in front of the computer (on my side) or if it is some kind of bug – seems very strange to me.
Thanks for your help so far!

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Also the sticky navigation is gone… It’s set in the customizer, and shows on all sites I did not use the feature image hack on.

My code now works well, but the navigation-bar color is not accepted, as said above, not even with !important. Can that be helped?

add_action( 'wp_head', function() {
    $image = get_the_post_thumbnail_url( get_the_ID() );
	$posttype = get_post_type ( get_the_ID() );

    if ( !empty($image) && $posttype == 'page' ) {
		?>
			<style>
				.site-header {background-image: url( '<?php echo $image; ?>' );}

				.inside-header {
					padding: 210px;
					line-height: 0px;
				}

				.site-header {
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}

				@media (min-width: 769px) and (max-width: 1024px) {
					.inside-header {
						padding: 150px;
					}
				}

				@media (max-width: 768px) {
					.inside-header {
						padding: 110px;
					}
				}
		
				.inside-navigation {
					margin-top: -50px;
				}
		
				.main-navigation {
					background-color: rgb(34, 34, 34) !important;
				}

			</style>
		<?php
	}
	else {
		?>
			<style>

				.inside-header {
					padding: 0px;
					line-height: 0px;
				}

			</style>
		<?php	
	}
} );

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Oh, cool ?? That’s really, really nice.
How would I tell it simply not to do anything if there is no feature image? We have sites that are planned to go without.
And how do I tell CSS to only do the background configuring for sites with a feature image, so sites without a picture don’t have a white header?

Tried to put it into the wp_head-hook (that would solve the problem with the header-CSS) but that did not work at all.

Also: I’ve moved my navigation up by -60px to overlay the picture. But now the main nav-bar-background is transparent and I can’t get it to react to any color, neither in the color-section of the customizer nor by adding CSS, not even by giving him an explicit transparency with an rgb-function. Everything else in the navigation bar reacts to colors, the texts, the background of the item currently in use… I’m stomped…

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Can’t delete old posts, so as update: Scaled mobile versions now, so I will use background images.

The background image does not scale on the mobile, can’t use it like that – probably would need to give it a different padding on a mobile. From an earlier post of yours I understand, that background images typically don’t scale.

And just for feedback, a problem with an image above the navigation is, one can’t put a logo into the primary nav, because one can’t use “use navigation as header” without loosing the image.

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

It did work much better than the other tries and is easy to implement, though not as easy to manage.

Still researching about getting navigation onto the bottom of the picture (transparency is straightforward), but I’ll stay with the momentary fix for now if the feature-image-hack is not possible.

In any case, thank you so much for helping newcomers with such grace. And I’ve already recommended my boss what a great theme GeneratePress would be for his planned new site ??