King Emir - emir@hub.disroot.org

Horizontal menu in Hubzilla layout

King Emir

Basel, Sun, 17 Feb 2019 12:21:56 +0100

!Hubzilla Support Forum !zotlabs.org | Hubzilla Development
In #Hubzilla, I created a #webpage #layout with this content:

[template]default[/template]
[region=nav][menu=horizontal]nav_de[/menu]$nav[/region]

$content

while nav_de is a #menu list that I created.

When using my layout, the menu items are listed vertically and not horizontally. What am I doing wrong?

webpages

show all 13 comments

h.EAR.t

Sun, 17 Feb 2019 13:26:35 +0100

Tanja

Sun, 17 Feb 2019 14:13:32 +0100

I always created my horizontal menus with float:left on the <li> element.

King Emir

Sun, 17 Feb 2019 14:31:05 +0100

I create my menus using /menu. Menu items, i create using /mitem. There's no option to add html or css.

@Tanja is there another way to include menus than using the layout element [menu][/menu] ?

h.EAR.t

Sun, 17 Feb 2019 14:37:07 +0100

@Tanja Yes, that was my very first approach.
Added float:left to style.css

.pmenu.horizontal li {
        margin-left: 0;
        display: inline;
        padding-right: 15px;
        float: left;
}

But => no.

Tanja

Sun, 17 Feb 2019 14:41:25 +0100

If I'm not mistaken, float doesn't work on inline elements. If you want to use float, you have to get rid of display: inline.

Tanja

Sun, 17 Feb 2019 14:42:27 +0100

@King Emir I don't have the slightest idea, to be honest...

King Emir

Sun, 17 Feb 2019 15:03:11 +0100

I made it. I created the menu as a html block instead of as a menu, and called it my_horizontal_menu_block.
Then I created another html block which contains the css for horizontal menu. I called it css_for_horizontal_menu.
Finally, I adjusted the content of my Layout like this:

[template]default[/template]
[region=htmlhead]
    $htmlhead
    [block][var=wrap]none[/var]css_for_horizontal_menu[/block]
[/region]
[region=nav]
    [block][var=wrap]none[/var]my_horizontal_menu_block[/block]
    $nav
[/region]

h.EAR.t

Sun, 17 Feb 2019 15:04:32 +0100

@Tanja Oh, that is in there originally if you git clone. But I had already tried that too. No.
Banging my head against the menu. :(
Unfortunately I have

.pmenu.horizontal li {
        margin-left: 0;
        padding-right: 15px;
        float: left;
}

Haakon Meland Eriksen (Parlementum)

Sun, 17 Feb 2019 15:06:07 +0100

h.EAR.t

Sun, 17 Feb 2019 15:07:07 +0100

Oh, I did it with a layout!

[template=bannertwo]choklet[/template]
[region=region_2]
[/region]

[region=banner]
[block]header[/block]
[/region]
[region=nav]

[menu=horizontal]menutwo[/menu]
[/region]


[region=aside]

[/region]



[region=footer]
[block]footer[/block] 
[/region]

h.EAR.t

Sun, 17 Feb 2019 15:35:47 +0100

King Emir

Sun, 17 Feb 2019 15:49:15 +0100

@h.ear.t What's in your block "header"? Some css? Do you use it to generate the horizontal menu?

h.EAR.t

Sun, 17 Feb 2019 15:51:09 +0100 last edited: Sun, 17 Feb 2019 15:52:36 +0100