Ambassador

[Bocool]

I must've remove the code by mistake.

The only thing I haven't checked yet is the mobile version but everything else looks good, so far.

[Bocool]

Mobile menu needs a bit of fixing...

EDIT:

1.  I've changed the hamburger color to gold.
2.  Updated responsive.css menu to look like the last version.

[Dave]

1.  I've changed the hamburger color to gold.

What is the hamburger colour?

[Bocool]

#967439 I had to use this as it's a .svg image:

https://boxy-svg.com/

[Bocool]

I've decided to change the dropdowns on the main menu to look exactly like the original. But, I'm having a problem with it. It isn't looking the same and I can't seem to get the 'a" or "a span" to change...

Otherwise, all else looks good.

[Dave]

I looked for a few hours today and got nowhere, so I posted in the Charter members area of SMF to see if anyone has the answer. Kindred replied but the code he suggested is not in the Ambassador css.

I tried adding the code but that didn't work either.

So I don't know how to fix it, I search and stopped all the linear-gradient code from running but nothing seems to change it

[Dave]

Update, this is what was posted on SMF

do you mean this?

Code (index.css:3950) Select Expand

.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button, .dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover, #top_section, .quickbuttons > li, .quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus, .inline_mod_check, .popup_window, #inner_section, .post_options ul, .post_options ul a:hover, .post_options ul a:focus, .notify_dropdown a:hover, .notify_dropdown a:focus {
  background: #fff;
    background-image: none;
  background-image: linear-gradient(#e2e9f3 0%, #fff 70%);
[/code[

Thanks Kindred I will look into that. An initial look at the index.css that's code is not showing. I'm wondering if the fact it's missing is causing the issue.

If what Kindred has suggested does not work it will be this right here -

Code Select Expand

.dropmenu li:hover li a, .dropmenu li li a {
    background: #1b1b1b;
    padding: 0 9px;
    color: #ddd;
    border: none;
    line-height: 2.2em;
    text-shadow: none;
}
 

[Bocool]

Hmmm, I've had a look and see what I've possibly done wrong. I'm not a fan of the way SMF has grouped the classes. They say it will make sites run faster. However, it a headache to code because if you want to change something that is groups with others you change them and which makes it harder to keep up with what has changed.

So, when I start on a theme I break some of it up, especially code like that for the dropmenus and topmenu as they are mostly grouped together. I like to split them up and then groups like ones together making it easier to make changes to the code, if needed. When I'm done I'll regroup things that are the same only if they have the same code. What happened is I can see duplicates which may be causing conflicts. SMF does the same but I guess I didn't check for it as I was coding.

I'll have go over the dropmenus and make sure everything is right and there are no conflicts.

[Dave]

It's OK I've found it

Index.css

line 805 - 814 replace what's current there with

Code Select Expand

/* Level 1 hover effects. */
.dropmenu li a:hover, .dropmenu li:hover a, .dropmenu li a:focus, #top_info > li > a:hover, #top_info > li:hover > a, #top_info > li > a.open {
    /*background: linear-gradient(to bottom, #4c4c4c 10%, #1b1b1b 90%);*/
    border: 1px solid #ffde74;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    /*box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1) inset;*/
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}
Once that's done the buttons are flat as per the original...and it's all my own work


UPDATE: What I have noticed is with the original when you hover over the menu button the colour of the background to the drop menu is a lighter colour than when you hover over the actual drop menu buttons.

My wife wants me to fix a mobile table for her, which includes making new drawers to replace the missing ones, so my time on here is going to be limited for a while, but please keep me up to date with any issues and as always if I can help I will.

[Bocool]

It's OK I've found it

Index.css

line 805 - 814 replace what's current there with

Code Select Expand

/* Level 1 hover effects. */
.dropmenu li a:hover, .dropmenu li:hover a, .dropmenu li a:focus, #top_info > li > a:hover, #top_info > li:hover > a, #top_info > li > a.open {
    /*background: linear-gradient(to bottom, #4c4c4c 10%, #1b1b1b 90%);*/
    border: 1px solid #ffde74;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    /*box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1) inset;*/
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}
Once that's done the buttons are flat as per the original...and it's all my own work

Thanks, you've saved me a bit of time tonight. LOL

UPDATE: What I have noticed is with the original when you hover over the menu button the colour of the background to the drop menu is a lighter colour than when you hover over the actual drop menu buttons.

Yes, that's what I'm trying to do. However, something is still not quite right but I'll figure it out sooner or later. LOL

[Bocool]

OK, I've got the hover color right but there's still a light border at the top of the fist dropmenu item and to the right of all of them....hmmmm...

EDIT: OK, I've given up for tonight. Maybe tomorrow. LOL

[Dave]

OK I've now solved that too.

The problem for the, what looked like a border. was just a width issue, so reducing the width got rid of that and the top part was padding, so the padding has been reduced from 7px to 6px.

So onwards and upwards...as they say

index.css

from line 950 - 960

replace

Code Select Expand

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: normal;
    border: none;
/*    border-bottom: 1px solid #212121; */
    background: url(../images/theme/menu_gfx.png) 0 -100px no-repeat;
    padding: 7px 0 0 0;
}
with

Code Select Expand

.dropmenu li ul {
z-index: 90;
display: none;
position: absolute;
width: 19em;
font-weight: normal;
border: none;
/* border-bottom: 1px solid #212121; */
background: url(../images/theme/menu_gfx.png) 0 -100px no-repeat;
/padding: 6px 0 0 0;
}


[Bocool]

Ha! About the time I was ready to eat and go to bed I had started wondering if it was a width/padding/margin issue. However, you should also change the width to:

Code Select Expand

width: 19em;
Well, at least in FF it removes what looks like a border on the right.

One thing I did notice last night was that there's actually curves on the highlighted bits. I noticed it yesterday cause I was changing the background to white just to see if there was something else causing the 'borders'.

[Bocool]

About line 890, make sure 'background' and 'border' are set to none.

Code Select Expand

/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenu li:hover li a, .dropmenu li:hover li a span, .dropmenu li:hover li a, .dropmenu li:hover li {
background: none;
/* padding: 0 9px; */
color: #ddd;
border: none;
line-height: 2.2em;
text-shadow: none;
border-radius: none;
}

[Dave]

I'm not sure why but I'm not getting your replies emails anymore.

I've sent a test email and I get that fine but not your replies. I have clicked all the buttons again so lets see what happen tonight