Is it possible to adjust placement of header background image with css padding?

BB Theme
1

http://moldeddevices.wpengine.com/

I would like to move the background image (ITAR/ISO) on the header to the right a bit, I haven’t been able to figure out if that is possible. Your help is appreciated!

2

Hey There,

As that image is a background image, I would suggest actually modifying the image in PS or other editing software and then re-uploading it. That way you can control where it sits in the header image if that makes sense.

Best,
Billy

3

thank you for the prompt reply Billy. so if I want to move that image toward the right a little, you’re saying to edit the image and add blank space to the left within the image?

4

Yep, I think that is your best bet and the easiest route to go!

5

ok got it, that worked thanks, but, now it looks terrible in responsive/mobile view, do you know if I can hide the background image for mobile or any ideas on how to make it look better?

thanks for the help Billy

6

You’ll most likely need to hide that BG image on mobile with a media query. Below is the bit of CSS to get you started with that and you can check out how to do media queries with CSS if needed using the below link. Hope that helps!

.fl-page-header {
   background-image: none;
}

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best,
Billy

7

thank you. on a side note, any idea why my ‘Home’ menu item is staying as the link hover color rather than matching the color of the other menu items?

8

Hey EngineeringRFQ,

I’d just chime in here. The reason you’re getting the hover color on the “Home” menu item is because that’s the “current” selected page. If you try selecting another page, let’s say the “Contact Us” page, you’ll notice the same highlighting. If you don’t want that effect, try using the CSS snippet provided below. Insert the code into Appearance > Customize > Code > CSS code. Let us know if you need anything further.:slight_smile:

.fl-page-header .fl-page-nav .navbar-nav > li.current-menu-item > a {
    color: #474747;
}

.fl-page-header .fl-page-nav .navbar-nav > li.current-menu-item > a:hover {
    color: #428BCA;
}

Thanks!

KC

9

thanks KC that did it

10

Hey EngineeringRFQ,

Glad that worked for you, enjoy BB and let us know if you need anything further! :slight_smile:

Thanks!

KC