Title: Move header image down with screen width
Last modified: December 26, 2020

---

# Move header image down with screen width

 *  [jenshendriks](https://wordpress.org/support/users/jenshendriks/)
 * (@jenshendriks)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/move-header-image-down-with-screen-width/)
 * So I’m making this website for my band. So far the desktop version is coming 
   along alright. I had to figure out how to make the header image stay the full
   width of the screen and not go past that width on smaller devices. I used this
   CSS code to achieve that:
 *     ```
       .has-header-image.home .custom-header, .has-header-video.home .custom-header {
               display: block;
       	height: 60vw;
               overflow: hidden;
       }
       ```
   
 * Now, however, because the image gets smaller on narrow devices, the logo and 
   menu in the top of the screen overlap the image way too much. Is there a way 
   to make the header image (and content, that button in the center) move down and
   create a space above it for the logo and menu? But only on narrow devices. I 
   need the logo and menu to overlap the header image on desktop.
 * Kind thanks!
    -  This topic was modified 5 years, 4 months ago by [jenshendriks](https://wordpress.org/support/users/jenshendriks/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmove-header-image-down-with-screen-width%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [corrinarusso](https://wordpress.org/support/users/corrinarusso/)
 * (@corrinarusso)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/move-header-image-down-with-screen-width/#post-13834550)
 * This is default behaviour for al the pages using that theme :
    [https://catchthemes.com/demo/euphony-pro/](https://catchthemes.com/demo/euphony-pro/)
   They were ‘expecting’ you to use a full sized background image that would render
   on all devices.
 * You may get better responses from the Theme support forum :
    [https://catchthemes.com/support-forum/forum/euphony-free/](https://catchthemes.com/support-forum/forum/euphony-free/)
 * But it’s going to take more than a little CSS to adjust this properly bc of where
   your content starts :
    [https://ibb.co/bm5PQwn](https://ibb.co/bm5PQwn) It is
   were me, I would re-consider my theme, or re-consider my content in that space.

Viewing 1 replies (of 1 total)

The topic ‘Move header image down with screen width’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [header image](https://wordpress.org/support/topic-tag/header-image/)
 * [Mobile device](https://wordpress.org/support/topic-tag/mobile-device/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 1 reply
 * 2 participants
 * Last reply from: [corrinarusso](https://wordpress.org/support/users/corrinarusso/)
 * Last activity: [5 years, 4 months ago](https://wordpress.org/support/topic/move-header-image-down-with-screen-width/#post-13834550)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics