Couple tweaks?

header#masthead.site-header {
	width: auto;
}

i tried this in additional css

If i can do the second item, first is kind of irrelevant

Hi there

Thank you for writing in.
Please follow the instruction kindly to solve your problems.
Go to your Dashboard ->Appearance ->Customize, Select Additional CSS and add the following code then save it.

1.To change the top Nav bar text color
.main-navigation ul li a {
color: #8a2d2d; }
.main-navigation li.menu-item-has-children > a:before {
color: #821919;
}

2.To reduce the header image area.

.header-wrap {
padding: 0px 0;
}
3.To have the header image fit to width on mobile responsive layout

header#masthead {
background-size: 100% 100% !important;
}
Note: This solves the header issue on mobile devices but this can affect the design of herder style, so better use a single image of the size recommended by theme.
Above mentioned CSS will solve your issue.

Thank you.

Thank you!
two small last things.
can i make the header image clip below the top menu? instead of extending into it?
and on mobile it’s wider than the viewport for some reason, and what i mean by this, is instead of staying fixed to the width, it extends past… i thought it was the background image, but i removed, and it still happens, it scrolls a full inch over. kind of experience breaking

Also, ‘home page’ template is not present, but frontpage is. Documentation specified homepage.

• This reply was modified 6 years, 9 months ago by tyrsdei.

Did a little digging, storevilla demo site at accespress theme site also is overextended an inch when viewed mobile, so it’s not even my site, but the theme.

So, is there an update to the theme coming that fixes this, or a couple lines of css that would fix this for additional css file?

I assume for the header image to be brought down below top nav, there would have to be some sort of responsive padding? yes?

• This reply was modified 6 years, 9 months ago by tyrsdei.

Hi there

Thank you for writing in.
you can not make the header image clip below the top menu because header section is fixed above top menu. our theme doesn’t have any background image for the header.
we are very sorry for your confusion, actually its front page, we are updating our documentation very soon.
In case of store villa demo site, the dimension of mobile and desktop are set different to each other, To show on the desktop an image is set as full width, that’s why the image is extended on mobile, please replace with the following code:
Background-size: cover;

Thank you.

background size is set as cover I’m pretty sure… but even on your demo site, the theme extends past main content outside of viewport… this is not pretty as when a mobile user scrolls, they can accidentally scroll over, cutting them off from the content
here is an example from my site
https://ibb.co/ePjyWT

and from your demo…
https://ibb.co/giJWko
https://demo.accesspressthemes.com/storevilla/ viewed from here, on three different phones.

separately… can i move the top nav bar to appear below header… the header
background image looks ugly extending into the top menu. I know this would require me to edit the theme directly, and i have already created a child theme for accomplishing this. If I can move the top nav bar, and keep the site from extending then i may very well upgrade to pro, as i do like the theme.

• This reply was modified 6 years, 9 months ago by tyrsdei.
• This reply was modified 6 years, 9 months ago by tyrsdei.

Actually… moving isn’t necessary it’s desired. … can I somehow add a semi transparent black background to the top nav

• This reply was modified 6 years, 9 months ago by tyrsdei.

Moving it would be optimal, so the image doesn’t stretch… but a fix for now would be a black bg… figured out the black bar. this will do for now… but that mobile overflow is on your end. Outside of my skills. mobile viewport code needs to be adjusted so there isnt a whole inch overflow