Howdy all!
I just installed Simple Blog and I cannot rearrange the menu text "Blog" as it does not show on Settings - Menu, though it shows up on the menu when I browse the website.
I only want 3 menu text: Home - Blog - About. Currently the order is Home - About - Blog.
How can I reorder so the "Blog" will be the 2nd and "About" will be the last menu?
Help please.
Rearrange Menu
Re: Rearrange Menu
Hey antoonpermadi,
if you are using default theme Sky, add this CSS style in your footer (but first switch to Code view if you have Summernote Editor plugin):
This should work fine if you have 3 items in the menu.
First line is to set all items to 0 then
:nth-of-type(2) and order:1,2 or 3 will "push" second item to the right.
Another option is to define all items:
if you are using default theme Sky, add this CSS style in your footer (but first switch to Code view if you have Summernote Editor plugin):
Code: Select all
<style>
.menu>li {order: 0;}
.menu>li:nth-of-type(2) {order: 3;}
</style>
First line is to set all items to 0 then
:nth-of-type(2) and order:1,2 or 3 will "push" second item to the right.
Another option is to define all items:
Code: Select all
<style>
.menu>li:nth-of-type(1) {order: 1;}
.menu>li:nth-of-type(2) {order: 3;}
.menu>li:nth-of-type(3) {order: 2;}
</style>
-
- Posts: 2
- Joined: Wed Dec 20, 2023 1:19 pm
Re: Rearrange Menu
AWESOME!!!
not sure what i did in changing the original Sky's CSS but at first, both ur suggestions didn't work.
but it DOES WORK when i change the original line of:
#topMenu nav ul{display:block;float:left}
into:
#topMenu nav ul{display:flex;float:left}
as re-ordering in CSS only works with "display:flex".
really appreciate ur reply. thanks a lot! u can see the result at permadi dot net.
~ AP ~
not sure what i did in changing the original Sky's CSS but at first, both ur suggestions didn't work.
but it DOES WORK when i change the original line of:
#topMenu nav ul{display:block;float:left}
into:
#topMenu nav ul{display:flex;float:left}
as re-ordering in CSS only works with "display:flex".
really appreciate ur reply. thanks a lot! u can see the result at permadi dot net.
~ AP ~