cleaning up the menu

cwazywabit · 2015-01-28 00:28:29

So im wandering
im using ce4 theme for wordpress and everything is working as expected php plugins is working but the look of the multi level navigation when viewed on a mobile device is to me messy with the navigation items {non ce4 but wordpress} which have sub directories in the middle while the top level navigation items align left.

surely php plugins are the way forwards for this and ive probably missed it somewhere but i just want a tidy menu structure with everything left aligning when in mobile view so i have nice clean menus and the items with dropdowns have the arrow on the right

rod barbee · 2015-01-28 00:48:32

actually, any menu styling should be coming from the TTG plug-in (hard to tell for certain without seeing what you're doing, can you post a link?)

In Lightroom, activate both side panels in the Web Module. You'll see the mobile menu icon. Click on that and you'll see what your menu will look like.

cwazywabit · 2015-01-28 00:56:04

my wordpress pages have overwritten/ deactivated the ce4 standard menu
http://www.jayclappphotography.co.uk

rod barbee · 2015-01-28 01:29:51

no, that's the ttg mobile styling being applied.

Look in Lightroom and open up the side panels to make the preview area smaller. You'll see the same thing happening there.

cwazywabit · 2015-01-28 01:50:15

okay we got that far but the collapsed view still has the drop down bit center aligned as opposed to left aligned

Last edited by cwazywabit (2015-01-28 01:51:48)

cwazywabit · 2015-01-28 02:00:21

well technically they are all center aligned but because of 2 links per line it forces the drop down ones out of line so just getting the menu items to display 1 per line would solve it

rod barbee · 2015-01-28 02:27:06

I don't think there is anything you can do about having two items per line. It's probably in the javascript.
You can change text alignment with custom css but you'll need to tailor it so it only affects the text and not the drop down icons.
And it looks like there are different selectors for items with-sub-menu and items without.

And you can style the menu with colors so that the layout will look cleaner:
http://ce4.theturninggate.net/docs/doku … tion_items

cwazywabit · 2015-01-28 02:50:05

maybe Mathew can help with the javascript side of things or know a work around.
i realize colours will indeed help it separate out more and if need be ill have to go that route

cwazywabit · 2015-01-28 04:12:03

ive just played about with the navigation css and got everything to left align and have one item per line job done

rod barbee · 2015-01-28 04:48:52

very cool
curious as to what you changed, I haven't had the time to play with it (and want to avoid going down the rabbit hole of curiousity ).

cwazywabit · 2015-01-28 04:58:32

the navigation css is in the lib folder towards the bottom you have the for small displays options
look for the only width 50% and change that to 100% and change the second and third text align to left align

cwazywabit · 2015-01-28 05:03:05

ive just changed the trigger width to 35% from 20

Last edited by cwazywabit (2015-01-28 05:06:44)

rod barbee · 2015-01-28 05:54:31

got it. You saved me some inspecting

one thing to think about is that if you export your theme again, that css will be overwritten. So the safe thing to do is to use custom css via phplugins.

rod barbee · 2015-01-28 06:15:27

a little bit of padding on the drop-down arrow helps too

.js #r2d2-menu #nav li.has-submenu > a.expand-submenu {
    padding-left: 8px;
}

cwazywabit · 2015-01-28 06:45:03

Yeh good point I'm glad it's sorted now it was doing my head in haha

rod barbee · 2015-01-28 07:30:36

I'm glad you posted about this. That was a good exercise with some pretty good results.

Daniel Leu · 2015-01-28 09:59:28

I like the one item per line in your mobile menu!

rod barbee · 2015-01-28 10:23:24

I did too. So I stole the idea for my site

cwazywabit · 2015-01-28 15:02:51

see now all we need is for one of you guys to write the code to paste into php plugins because im not very good on that side of things im better at finding the right bit of code to change

rod barbee · 2015-01-28 15:14:10

I'll post the custom css in the morning.

rod barbee · 2015-01-30 00:07:12

oops a day late. But here's what I used (and I'm assuming is close to the same changes you made)

first, enable phplugins globally and then enable custom css in the phplugins.php file

and here's the css to put in the custom.css file:

@media only screen and (max-width: 784px) {
#nav span a, 
#nav span a:hover, 
#nav > span:first-child > a, 
#nav li a, 
#nav li a:hover, 
#nav li span, 
#nav li li a, 
#nav li li span,  
#nav > li:first-child > a     {
text-align: left;
}

.js #r2d2-menu ul#nav li {
        width: 100%;
        }
.js #r2d2-menu #nav li.has-submenu > a.expand-submenu {
    padding-left: 8px;
    width: 35%;
    width: calc(35% - 3px);
        }
}

gaufde · 2015-02-14 06:04:36

Thanks you guys for doing this as I really like the way this looks. I did play around with it some, and I added to the code so that drop-down menu items on mobile devices are indented 50px to make it easier to see. I am still learning, so if anyone sees an improvement to the code that I could make please let me know.
Here is what I am using now:

/*MENU ALIGNMENT*/
@media only screen and (max-width: 784px) {
#nav span a, 
#nav span a:hover, 
#nav > span:first-child > a, 
#nav li a, 
#nav li a:hover, 
#nav li span, 
#nav li li a, 
#nav li li span,  
#nav > li:first-child > a     {
text-align: left;
}
#nav li ul li > a {
    margin-left: 50px;
    }

#nav li ul li > a:hover {
    margin-left: 50px;
    }
.js #r2d2-menu ul#nav li {
        width: 100%;
        }
.js #r2d2-menu #nav li.has-submenu > a.expand-submenu {
    padding-left: 8px;
    width: 35%;
    width: calc(35% - 3px);
        }
}

Community @ The Turning Gate

#1 2015-01-28 00:28:29

cleaning up the menu

#2 2015-01-28 00:48:32

Re: cleaning up the menu

#3 2015-01-28 00:56:04

Re: cleaning up the menu

#4 2015-01-28 01:29:51

Re: cleaning up the menu

#5 2015-01-28 01:50:15

Re: cleaning up the menu

#6 2015-01-28 02:00:21

Re: cleaning up the menu

#7 2015-01-28 02:27:06

Re: cleaning up the menu

#8 2015-01-28 02:50:05

Re: cleaning up the menu

#9 2015-01-28 04:12:03

Re: cleaning up the menu

#10 2015-01-28 04:48:52

Re: cleaning up the menu

#11 2015-01-28 04:58:32

Re: cleaning up the menu

#12 2015-01-28 05:03:05

Re: cleaning up the menu

#13 2015-01-28 05:54:31

Re: cleaning up the menu

#14 2015-01-28 06:15:27

Re: cleaning up the menu

#15 2015-01-28 06:45:03

Re: cleaning up the menu

#16 2015-01-28 07:30:36

Re: cleaning up the menu

#17 2015-01-28 09:59:28

Re: cleaning up the menu

#18 2015-01-28 10:23:24

Re: cleaning up the menu

#19 2015-01-28 15:02:51

Re: cleaning up the menu

#20 2015-01-28 15:14:10

Re: cleaning up the menu

#21 2015-01-30 00:07:12

Re: cleaning up the menu

#22 2015-02-14 06:04:36

Re: cleaning up the menu

Board footer