• Resolved webmommy

    (@webmommy)


    Hello, I love this theme, but my client wants the navbar floating over the header image. I can change the transparency of the background color of the navbar, but there is about 60px padding above the header image. No matter what I change, I can’t seem to get the header to move up. Here is the link: https://120.736.mwp.accessdomain.com/ Any help would be appreciated!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • body {
        padding-top: 0;
    }
    Thread Starter webmommy

    (@webmommy)

    Thank you for the reply, Mr. Case.
    I tried that last night and it didn’t work. This is a Bootstrap theme and I am not familiar with Bootstrap, so I don’t know if that has anything to do with it. Things that normally would work don’t seem to be working for me. ??

    where are you adding the css? A custom css plugin? a child theme?

    I never use preexisting frameworks, but from my knowledge of bootstrap, it is a mobile first framework. You may have to add that bit of css to one of the media queries.

    Have you tried adding the ‘!important’ declaration to see if it overrides any preexisting css?

    Theme Author Tim Nicholson

    (@timnicholson)

    Yeah, there is quite a bit of complex media queries involved to get that fixed navbar at the top. The WordPress admin bar complicates it even more. But the padding you are talking about is all adjusted in Spot’s style.css right at the top. It starts with basic “body” padding, then adjusts it to two different sizes of the WordPress admin bar, depending on the screen width.

    I see you’ve switched the site to a different theme that doesn’t have a transparent navbar, but used javascript to adjust the navbar height as you scroll down the page. This is a very popular style right now and it’s high on my priority list for a new child theme to Flat Bootstrap.

    I’ve actually got that working in a child theme I’ve been playing with, but it’s one thing to handle a single website and another to try to address all the possible different usage scenarios. Specifically, how should a transparent navbar react to a user not having an image header on a particular page? There is just a lot of logic to think through. If you email me, I’d be happy to send you my code. I just don’t want to post it on github and have someone think its a completed theme ready to use.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Move header image up under navbar’ is closed to new replies.