[bluebird]

Oops!

[bluebird]

Thanks for sharing this Erika!

[bluebird]

You're welcome! I like to help out when I can.

Cheers:-)

[bluebird]

I think that you forgot to get rid of the header-image .site-title a min-height property:-)

[bluebird]

You're welcome Valhalla!

If everything else seems to be sitting well at the tablet and desktop view breakpoints, then (assuming that this is not a mobile first design) I would try using a max-width of 414px. That should cover most mobile phones.

Cheers,

Juliette

[bluebird]

Hi @vallhalla,

Try getting adjusting these properties in mobile view with media queries:

.header-image .site-title a {
     ////////get rid of the min-height property

}

.header-image .site-header .title-area{
////lessen the padding of the top/bottom///
  padding: 20px 0px;
}

.primary-nav .site-header {
  ///adjust margin-top according to view-port size//////
  margin-top: -20px;
}

See if that helps:-)

Juliette

[bluebird]

Hi Rainer,

(Brad, tell me if this is the wrong approach, as I am still new to Genesis and its child themes)....

Another avenue to explore would be to add a custom body class to each page (via a custom template for each custom page) that you want to apply custom styles to like so:

add_filter( 'body_class', 'childthemeprefix_new_body_class' );
function childthemeprefix_spotify_body_class( $classes ) {
	$classes[] = 'new-page';
	return $classes;
}

Then select each header like so:

.new-page .site-header{
  //your styles here.....
}

I guess it all depends on how much customization you plan on implementing.

Cheers:-)

[bluebird]

You are welcome Rainer!

I'm just getting familiar with Genesis and its child themes myself, but I imagine that getting a transparent menu bar shouldn't be any more complicated than working with the background-color and the opacity via your css file in your template.

Cheers and Happy Holidays:-)

[bluebird]

Hi Rainer,

Check this theme out and see if it's something that you can work with:

Lifestyle Pro Theme

Cheers:-)

Juliette

[bluebird]

Hi Emasai and Brad,

Thanks for getting back to me. I tried to add the image by calling it from my images folder like so:

add_theme_support( 'custom-header', array(
    'default-image'   => get_stylesheet_directory_uri() . '/images/logo.svg',
    'width'           => 100,
    'height'          => 100,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

...and it did not work...

I also tried to add the image via some javascript:

var image = document.createElement("img");
      
      var imageParent = document.querySelector("a");
      var searchPic = new Image(100,100);
       searchPic.src = "images/logo.svg";
      // image.id = "Id";
      // image.className = "class";
      image.src = searchPic.src;
      imageParent.innerHTML = "";
      imageParent.appendChild(image);

With this code the link still works, but the image (even though I can see it referenced in the console) does not appear as it should.

I also tried a plugin to no avail. I also tried the code that is referenced the CSS Tricks link above and that didn't work either.

Sigh....... I'm beginning to think that it's just not possible. Hopefully I'm wrong.

Thanks again:-)

[Author]

Posts