Nav Bar Help

BB Theme
1

Hi,

I have just changed my theme over to BB… All good but as I expected I’m having problems with the navigation bar.

Firstly I would like the logo so it was overlapping the row below the main nav, so the header background would end inline with the work ‘digiDen’ in the logo… I am giving CSS Hero a go, but I don’t even seem to be able to select the logo…

Also is there a way to change the logo to a different image for the fixed header, as at the moment it is far to small…

Thanks
Susanna

2

Hey Susanna,

Would you mind sending along the site URL so we can take a look?

Best,
Billy

3

Opps! https://digi-den.com/

4

Hey Susanna,

Try the CSS snippets below and see if it works. The background stuff may need playing around with.

/* Logo changes */
@media (min-width: 768px) {
  .fl-page-header-container {
    position: relative;
  }
  .fl-page-header-logo img {
    position: absolute;
    top: 0px;
    z-index: 999;
  }
  .fl-page-header-primary .fl-page-nav-wrap {
    padding: 40px 0px; /* Adjust accordingly */
  }
}
/* Change fixed header logo */
.fl-page-header-fixed .fl-page-header-logo {
  background-image: url(www.domain.com/img.jpg);
  background-size: 100px 100px;
  background-repeat: no-repeat;
}
.fl-page-header-fixed .fl-page-header-logo img {
  opacity: 0;
}

Ben

5

Hi Ben,

Thats great, thank you! Unfortunately its not great when responsive, http://d.pr/i/19qqE http://d.pr/i/15w3X

I’ll have a go at adding a replacement logo for the fixed header now…

Thanks again!

6

Hey Susanna,

Try this instead.

@media (min-width: 992px) {
  .fl-page-header-logo img {
    position: absolute;
    top: 0px;
    left: 15px;
    z-index: 999;
  }
}

Ben

7

thats great… I know this is really pushing my luck but is there a way to have the logo as it is but centralised in the middle of the 6 nav buttons? :-/

8

Just playing with this idea

/* Change fixed header logo */
.fl-page-header-fixed .fl-page-header-logo {
  background-image: https://digi-den.com/wp-content/uploads/2015/10/digiDen-word-011.png;
  background-size: 100px 100px;
  background-repeat: no-repeat;
}
.fl-page-header-fixed .fl-page-header-logo img {
  opacity: 0;
}

Nothing seems to be showing up… Have I added the image URL correctly in the css?

9

Hey Susanna,

The background-image needs to have the word URL. For your case, it needs to be background-image: url(https://digi-den.com/wp-content/uploads/2015/10/digiDen-word-011.png);.

Re the logo, I tried playing around with it but can’t seem to get it to work like that. I guess it needs more work, i.e., modifying the theme files and such.

Ben

10

Hi Ben,

Never mind the centralised logo, I will look into that at a later date, for now I would like to get the fixed header logo sorted. It still doesn’t seem to work with that code

/* Change fixed header logo */
.fl-page-header-fixed .fl-page-header-logo {
  background-image: url(https://digi-den.com/wp-content/uploads/2015/10/digiDen-word-011.png);
  background-size: 100px 100px;
  background-repeat: no-repeat;
}
.fl-page-header-fixed .fl-page-header-logo img {
  opacity: 0;
}

Am I still missing something?

Many thanks
Susanna

11

Hey Susanna,

Weird as that worked before. I’ve added a height setting though. Give this one a shot. It may need a bit of playing around with the values. Also, you may want to remove the top padding you’ve added to the fixed header. :slight_smile:

.fl-page-header-fixed .fl-page-header-logo {
  background-image: url(https://digi-den.com/wp-content/uploads/2015/10/digiDen-word-011.png);
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: 0px -25px;
  height: 50px;
}

Ben

12

Thats perfect, thanks for all your help Ben, spot on as always! :slight_smile:

13

No worries! Have fun with BB! :slight_smile:

Ben