header image resize for mobile?

  • Here is the site:
    recordsrequests.com/wp

    I have read some posts about this, but have been unable to make anything work here. I have created a child style.css and also a functions.php file with smaller height for the header image, however, that didn’t work. . . navigation bar simply overlapped the header image on mobile device.

    I’m guessing I need to provide a smaller header image for mobile? If so, where do I put it?

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

  • Hi there
    Realized I had the same problem… seeing there is not much help, I installed Meta slider and set that to responsive. Then added the php code to the header.php (child theme is probably better, but could not be bothered) This works well, even if you only have 1 image.. and of course you could have a nice slideshow there.. it is responsive.. maybe this helps, cheers, Groggo

    hartmutnz

    Where did you paste the php code in the header.php?
    Is there anything i need to delete?

    Hi, it is simple. But I jsu quickly tell everyone to create a child theme first. It is easy, read it here: https://codex.www.ads-software.com/Child_Themes

    Then copy the style.css and the header.php into the child theme.
    Then edit the HEADER php , even if you don’t do the child them, just edit the HEADER.php in your theme editor.
    Depending on the slideshow you use, I use Revolution slider, but you can use Meta slider which is free on WordPress. Once you activated the slider and created a slide, paste the slider code (Your code will be SIMILAR depending on your slider!! like this: ?php putRevSlider(“home1”) ?, into header.php like this example:

    </head>

<body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</a>

<?php putRevSlider("home1") ?>

			<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">

    If you want your NAV bar on top of the slider, paste the slider code below the NAV bar code…
    View the live example here: https://hartdesign.info/shop33/

    Good luck, Groggo

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘header image resize for mobile?’ is closed to new replies.