Where is the main menu on Curve? Help, Search, Admin, Moderate, Profile etc

[JustForFun]

I would like to change the order of the main menu, but I haven't been able to find it yet.

Help, Search, Admin, Moderate, Profile, My Messages, Members, Logout.

Thank you.

[Antechinus]

Sources/Subs.php

Although, it would be possible to change the order of the top level menu buttons purely with a bit of cunning CSS.

[JustForFun]

Sources/Subs.php

Although, it would be possible to change the order of the top level menu buttons purely with a bit of cunning CSS.

Thank you Antechinus. What would be the easiest way to change it?

[Antechinus]

Exactly what do you want to do? Do you only want to change to order of the buttons, and nothing else?

Oh, and is this for 2.0 or 2.1?

[Shades.]

This mod is for 2.0 but works on 2.1 although the admin section is a little squished together but it works...
https://custom.simplemachines.org/index.php?mod=2348

[JustForFun]

Exactly what do you want to do? Do you only want to change to order of the buttons, and nothing else?

Oh, and is this for 2.0 or 2.1?

It's 2.0.18. I want to change the order, and I want to move Admin & Moderator to the right side of the page.

[Antechinus]

Should be easy. Hang on while I check on a test site.

[Antechinus]

Ok, all the main menu buttons come with individual ids (#button_home, etc). You see get these from a document inspector (right click > Inspect).

As an example, this will put the Home button last, and at the right side of the screen:

Code Select Expand

#menu_nav {
    display: flex;
    flex-wrap: wrap;
}
.dropmenu li {
    float: none;
}
#button_home {
    order: 9;
    margin-left: auto;
}
The way it works: setting the menu ul to flex - with the li's set to float: none; - lets you use CSS order to arrange each button in any order you want them. Just use a number big enough to make your chosen button the last one. Using margin-left: auto; on the Home button shoves that over to the right of the menu ul.

[JustForFun]

This mod is for 2.0 but works on 2.1 although the admin section is a little squished together but it works...
https://custom.simplemachines.org/index.php?mod=2348

Thank you Shades. I haven't installed any mods yet, but I'm about to learn how.

[JustForFun]

Ok, all the main menu buttons come with individual ids (#button_home, etc). You see get these from a document inspector (right click > Inspect).

As an example, this will put the Home button last, and at the right side of the screen:

Code Select Expand

#menu_nav {
    display: flex;
    flex-wrap: wrap;
}
.dropmenu li {
    float: none;
}
#button_home {
    order: 9;
    margin-left: auto;
}
The way it works: setting the menu ul to flex - with the li's set to float: none; - lets you use CSS order to arrange each button in any order you want them. Just use a number big enough to make your chosen button the last one. Using margin-left: auto; on the Home button shoves that over to the right of the menu ul.

Which file is that snippet of code from?

[Antechinus]

It's code I wrote myself, but you can add it to the end of index.css if you want to test it.

[JustForFun]

It's code I wrote myself, but you can add it to the end of index.css if you want to test it.

I added the above code to the end of index.css, but I don't see any difference in the menu.

[Antechinus]

Did you try hard refreshing your browser? Ctrl+F5

[shadav]

Did you try hard refreshing your browser? Ctrl+F5

and if you use cloudflare or the likes, you'll need to clear the cache there first then do a hard refresh on your browser

[JustForFun]

Did you try hard refreshing your browser? Ctrl+F5

and if you use cloudflare or the likes, you'll need to clear the cache there first then do a hard refresh on your browser

I have triple checked to make sure that the modified  index.css file is loading. I don't use Cloudfare. Site is sitting on a byethost free account, where I don't see any way to dump server cache. I did notice that SMF has a cache directory..

.

[Antechinus]

It may be something to do with me running that code in Stylus instead of directly in index.css. I'll try it on a test site with an actual file edit, and get back to you.

[Mick.]

Make sure you're editing the correct theme! 

[Antechinus]

I have triple checked to make sure that the modified  index.css file is loading. I don't use Cloudfare. Site is sitting on a byethost free account, where I don't see any way to dump server cache. I did notice that SMF has a cache directory...

Ok, just tested it on local. It works as it should.
Obvious next question: are you using the SMF 2.0.x default theme?
Or are you running a different theme with a different menu structure?

[JustForFun]

I have triple checked to make sure that the modified  index.css file is loading. I don't use Cloudfare. Site is sitting on a byethost free account, where I don't see any way to dump server cache. I did notice that SMF has a cache directory...

Ok, just tested it on local. It works as it should.
Obvious next question: are you using the SMF 2.0.x default theme?
Or are you running a different theme with a different menu structure?

Thank you Antechinus..  I made the modification to a copy of Curve. Something I noticed before I decided to customize Curve, is that when I installed other Theme's, they wouldn't work unless I changed the local drive addresses. I don't know if that is a problem with Byethost or SMF but there is something strange going on. I didn't have to change the addressing on the copy of Curve for it to work though. I'll get back at it on Sunday and show you how I had to change those addresses.

[JustForFun]

I have triple checked to make sure that the modified  index.css file is loading. I don't use Cloudfare. Site is sitting on a byethost free account, where I don't see any way to dump server cache. I did notice that SMF has a cache directory...

Ok, just tested it on local. It works as it should.
Obvious next question: are you using the SMF 2.0.x default theme?
Or are you running a different theme with a different menu structure?

I just modified the original Default Curve. Thought that I had it figured out for a minute, but not. When I modified the copy of Curve I placed your script at the end like you said, but neglected to notice that there were two brackets at the end of the original page full of script. When I just modified the default original, them I put the two brackets after your script. Still no change to the menu.. Any ideas what I could be doing wrong.?

.

[Antechinus]

No idea right now. Can you attach a copy of your index.css please?

[JustForFun]

You cannot view this attachment.

[Antechinus]

Ok, and you are saying that does not put the Home button over at the right side?

Because that is what the test case was. I don't know how many buttons you have in your menu, so I can't choose the right order number to put something last. You'll have to count them and do it yourself, or tell me how many buttons you have and what order they are in by default.

[JustForFun]

Ok, and you are saying that does not put the Home button over at the right side?

Because that is what the test case was. I don't know how many buttons you have in your menu, so I can't choose the right order number to put something last. You'll have to count them and do it yourself, or tell me how many buttons you have and what order they are in by default.

That's correct.. The script that you gave me doesn't change the position of the Home Button.

[Antechinus]

Ok, I'll need to be hooked up to a live example of the problem. Can't really diagnose it like this.

[Antechinus]

Ok, just tried that code live on your site (via Stylus). It works as it should. So, I'm not sure why it won't work in your index.css. You can try adding !important to the code. I normally avoid that if possible (too many people use it without thinking) but it may work here.

Code Select Expand

#menu_nav {
    display: flex;
    flex-wrap: wrap;
}
.dropmenu li {
    float: none !important;
}
#button_home {
    order: 9;
    margin-left: auto;
}

[JustForFun]

Ok, just tried that code live on your site (via Stylus). It works as it should. So, I'm not sure why it won't work in your index.css. You can try adding !important to the code. I normally avoid that if possible (too many people use it without thinking) but it may work here.

Code Select Expand

#menu_nav {
    display: flex;
    flex-wrap: wrap;
}
.dropmenu li {
    float: none !important;
}
#button_home {
    order: 9;
    margin-left: auto;
}

Okay, it has been replaced with this code.

Still no go. I'm starting to think that it might be best to blow that board down and reinstall since I didn't have any success with using the third party theme's that I have installed. Maybe they screwed up the default programing some how.

[Antechinus]

It must be something weird on your site. Can you ask your host?

[shadav]

are you using the minify css and js option?
are you adding it to the theme you are using's css file?
after adding it do you clear your browser cache and then hard refresh your site ctrl+f5?
you said you're not using cloudflare but is your host/server using some cache?
do you have cache settings on smf?

[Antechinus]

This is 2.0.x. No minify option.

[shadav]

This is 2.0.x. No minify option.

  missed that somewhere in the discussion
well one less thing to worry about then