Links

Would it be possible to move the search input field on the mobile view to the top?

Meaning:
1. Search Area
2. Custom Links
3. System Links

I think this would be visually more attractive. Any thoughts about it?

I tried both Pollux and sheldon solution but couldnt be able to style my links. Can i get any help ?

warpunish Can i get any help ?

Sure, so what is your question?

Keep in mind: Some more information what you already did, what the outcome was and what you want to achieve will always be immensely helpful.

Pollux I tried adding

.item-link1::before {
font-weight:bolder;
color: White;
padding-right: 5px;
font-size: 15px;
}

to custom CSS under Apperances page but it doesn't change a thing. What i want is, more distinct links in my navbar. Right now my link looks weak and they dont draw attention.

warpunish don't forget to always clear cache after you change setting your flarum.

warpunish

Where did you tell the browser to use FontAwesome? Where is the content, that you want to add?

I suggested:

.item-link1::before {
    font-family: FontAwesome;
    content: ...
    font-size: ...
}

but you skipped the two most important attributes.

Anyway, I suggest to use @sledov's way of doing this:

.item-link1 .LinksButton.Button.Button--link::before {
    content: "\f005";
    font-family: fontawesome;
    padding-right: ...
    font-size: ...
}

This way, you apply the icon to the <a> element (this has the classes LinksButton, Button and Button--link) , so the icon becomes part of the link.

FebriTriHarmoko don't forget to always clear cache after you change setting your flarum.

No, usually you don't need to do that after changing custom CSS in the admin panel. Just refresh the browser content.

Pollux I tried @sheldon 's way this time but i thing i am getting something wrong. It just changes icons property not the text's. Do i have to add something else ?

Pollux Can i make text of the link bolder ?

Pollux Thank you. One last question is it possible to change color of the text i tried

.item-link1 {
font-weight: bold;
color: Red;
}

but it didn't work.

The <a> element inside the <li> element with class item-link1 has its own color, so you have to override that:

.item-link1 {
    font-weight: bold;
}
.item-link1 a {
    color: red;
}

or shorter:

.item-link1 a {
    font-weight: bold;
    color: red;
}

sijad done!

It's a normal that activation takes 2/3 minutes and a red error that prevents re-opening the admin area?

however, it is turned on and works! ?

sijad

maybe it was just a cache issue. I spoke > This...

sijad we're good to go, thanks!