Style template Social Birds has buggy navigation menu - please fix!

  • 1
  • Question
  • Updated 6 years ago
  • Answered
I'm using the Premium style "Social Birds", and you'll see that (at least in Google Chrome) clicking on any menu item on the website www.birdmigrationcelebration.org, the navigation menu is pushed to the right, and some items are bumped to the next line. I really like this template and would like to use it. Can you please fix it?
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
  • frustrated

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Rebecca,

It appears that you have customised the CSS and I'm not sure if this is causing the problem?

If you feel that this could be associated with the issue can you undo the customisation and see if the nav menu comes back to what it should? Then possibly work forward again to see if any specific element bumps the layout?
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
Hi there - I've disabled my custom CSS and the problem still occurs. Another issue is I can't get to the "schedule" page from the home page, but I can get to it from any other page. Please help!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Rebecca,

I "looked" at your site with Firebug and noticed that the first two nav titles are not accessible from your home page (even though one is the "Home" nav button.) There is a large amount of padding under the title Bird Migration Celebration which goes down to the birds and includes the two titles of the nav. I looked at the code and saw the bottom padding was 130 px so I changed this in Firebug to 30 px and then I could access the the Home and the Schedule buttons. I have no idea what other unknown effects this may have but it seems to be associated with the problem.

If you wish to try this:

(This is how it appears without change)
#headlinewrapper h1 a {
background: url("templates/Birds/resources/common/images/headline_right_door.png") no-repeat scroll right top transparent;
color: #DBEDDD;
display: inline-block;
padding: 20px 80px 130px;
}


can you add this bit of code to your over-rides:

#headlinewrapper h1 a {
background: url("templates/Birds/resources/common/images/headline_right_door.png") no-repeat scroll right top transparent;
color: #DBEDDD;
display: inline-block;
padding: 20px 80px 30px;
}
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
Hi! That CSS code change fixed the link problem with the Schedule menu item - thanks! But the problem of the shifting navigation menu still persists. I've attached a screenshot.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's exactly the same issue Rebecca.

Changing the CSS will stop this happening. I see you added embedded CSS. I would add preferably to the CSS over-rides. I can still see an issue with the Home page in that you can't select the Schedule nav.



after applying the altered CSS.

It doesn't appear that you have changed the padding from 130 px to 30 px in the code i sent previously. This I think is the blocking aspect.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Looking at it further I think you have copied all the CSS and placed it into the embedded facility. You don't need to do that. You only need to take the CSS that needs to be changed and place this into your over-rides or an embedded facility in an HTML widget.

So if you wished to embed it on one page only then you would specifically add:
<style type="text/css">
#headlinewrapper h1 a {
background: url("templates/Birds/resources/common/images/headline_right_door.png") no-repeat scroll right top transparent;
color: #DBEDDD;
display: inline-block;
padding: 20px 80px 30px;
}
</style>


If it was site wide then you would just add:

#headlinewrapper h1 a {
background: url("templates/Birds/resources/common/images/headline_right_door.png") no-repeat scroll right top transparent;
color: #DBEDDD;
display: inline-block;
padding: 20px 80px 30px;
}
to your CSS over-rides.
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
O.K., I added only the CSS style change you suggested to the overrides, but that still isn't fixing the navigation menu problem. Other thoughts?
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
Oooooohhh--I take that back. It is working now!!! Just had to clear my browser, I think. Thank you so much!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This code is still in your embedded CSS and embedded CSS will naturally over-ride external styles (CSS over-rides)
<style type="text/css">
........
#headlinewrapper h1 a {
color: #dbeddd;
background: url(templates/Birds/resources/common/images/headline_right_door.png) top right no-repeat;
padding: 20px 80px 130px 80px;
display: inline-block;
}
........
</style>


you need to remove this from your previously embedded CSS. The value of 130 px is the problematic figure.

The native style is over-ridden by CSS over-rides, CSS over-rides are over-ridden themselves by embedded CSS.
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
I'm sorry; I don't understand where to find the embedded CSS. I didn't embed any CSS--that I know of--and I can't change the HTML of the site. I only changed the site CSS, as you instructed, and as shown by the screenshot below. If you can tell me how to find embedded CSS, I will remove it. Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I have thought of another way to do this. That is to leave the CSS overide and simply add a little bit to it.

#headlinewrapper h1 a {
color: #dbeddd;
background: url(templates/Birds/resources/common/images/headline_right_door.png) top right no-repeat;
padding: 20px 80px 30px 80px !important;
display: inline-block;
}

The word !important is a global over-ride of any other CSS that may be affecting the element.

If this works this will be your simplest solution.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I just noticed your statement from 2 hours ago where you sid that you had cleared your browser and it was working. is this still the case? If so don't worry about anyhting after that.

We must have entered stuff here at about the same time.
Photo of Rebecca Richter

Rebecca Richter

  • 7 Posts
  • 0 Reply Likes
Hi, yes, you did clear up the problem earlier with the CSS override. I'm happy with the site now, but thought that maybe you wanted me to pursue another fix that was better. But I think we're good for now!