Sub-menu page items and scroll

Hi,
To have such long submenu is not best practice.
Consider to do some category sorting
Then you can use
Menu/
…..Category-Submenu-1/
…..Category-Submenu-2/
…..Category-Submenu-3/
…………………..Items-Sub-Submenu-1
…………………..Items-Sub-Submenu-2
…………………..Items-Sub-Submenu-3

Or use some sidebar widget with categories and sort it that way.
Cheers
TR

• This reply was modified 8 years, 1 month ago by Tahoerock.

Thanks, I’m new to web development and assumed that there might be some kind of cut-off point or media query put in place by the theme creators to remedy what happens in this instance. Can anyone from Automattic suggest how to manage this content better – it uses pages not posts.

Hi @marls40,

The theme doesn’t impose any limit as to the number of sub menus you can have, however, as @tahoerock noted, a particularly large number is not good practise and is hard for visitors to navigate.

For your poetry, I can see that you’ve listed a link to each sub page (containing a single poem) on the parent Poetry page:

https://jimnewcombe.co.uk/poetry/

I recommend keeping the above page as it is and then removing all of the sub items from beneath the Poetry menu.

Visitors to your site can simply click on Poetry to be taken to an easy to navigate list that links to your individual poems.

Would that work for your needs?

Hi, That is a really good solution. I might add a back button or a breadcrumb to aid the navigation. I wasn’t counting on so many pages but I’ve been given a lot of new material.

Thanks for that, I’ll give that a shot.

Hi Marls,
I was playing a bit with @siobhyb idea and HERE IS A SCREENSHOT

If you like it we can tweak it further.
Here is you have to do next:
put this code to your Child Theme style.css file
OR
Install Simple Custom CSS plugin and put the code there.
I’m doing this on my browser to find solution.
It can get to some different behavior on your site.
It can happen that it is not working.
Then we have to look further.

.poems ul {
    display: block;
}

.poems li {
    float: left;
    margin: 1em 5px;
}

.poems li a {
    border-radius: 25px;
}

OR

.poems ul {
    display: block!important;
}

.poems li {
    float: left!important;
    margin: 1em 5px!important;
}

.poems li a {
    border-radius: 25px!important;
}

You can play with PX numbers to your likes.
Hope this will help
…..and delete all submenus

Cheers
TR

• This reply was modified 8 years, 1 month ago by Tahoerock.
• This reply was modified 8 years, 1 month ago by Tahoerock.
• This reply was modified 8 years, 1 month ago by Tahoerock.

….I forgot the screenshot with border radius

I like that idea, thanks. I was lacking inspiration for the layout for that page, so just had the content like that for the moment. I will try that out, cheers!

Thumbs UP ??
If you need further help, let me know
cheers
@tahoerock

Cheers!

Thank you for sharing your idea, @tahoerock!

My pleasure,
Feel free to ask in the future.
Cheers
@tahoerock

Hi there, just getting back to this. Thanks for your suggestion of laying the titles out. I was thinking along those lines or incorporating Flexbox or something similar.

On another note, I’ve had some issues with keeping the footer at the bottom of the page / viewport on this site. Where there is not a lot of content, I want the footer at the bottom of the viewport and where there is a lot of content, I want it at the bottom of the content.

I’m talking specifically about these pages –

https://jimnewcombe.co.uk/poetry/

https://jimnewcombe.co.uk/book-reviews/

Do you recommend how I can best do this?

This is my current footer code:

#colophon, .site-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0!important;
height: 2em;
width: 100%;
background-color: #ffaa80;
line-height: 2em;
}

If I include the code below, it works fine on mobile view but not desktop:

.page-id-13 #colophon, .site-footer, .page-id-15 #colophon, .site-footer {
position: relative;
}

And if I comment it out, it works the other way round – fine on desktop but not mobile.

Any ideas, short of targeting specific pages and media queries etc? Thanks!

• This reply was modified 8 years, 1 month ago by marls40.

Hi @marls40,

The height that you’ve set for that specific page in your custom CSS is preventing the footer from sticking to the bottom on mobile devices:

.page-id-15, .page-id-13, .page-id-17 {
    background-image: url(https://jimnewcombe.co.uk/wp-content/uploads/2016/10/shakespeare.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

The above is setting the page to be 100% of the viewport height (the area where your site is displayed on a screen) which is smaller on mobiles.

If you remove the above then the following should work to bring the footer to the bottom across all devices:

#colophon, .site-footer {
    position: absolute;
    bottom: 0;
}

Let me know how that goes!

That is great, thanks a lot!

If I’ve not used up my 9 lives yet, any ideas how I can get this to display better in mobile view?

Improvisations on the Theme of the English Language as England

From page https://jimnewcombe.co.uk/poetry/

Not happy how it looks at the moment!

Hi @marls40,
Concerning footers:

Install Simple Custom CSS plugin and put the code there.
I’m doing this on my browser to find solution.
It can get to some different behavior on your site.
It can happen that it is not working.
Then we have to look further.

footer#colophon {
    position: relative;
    left: 0px;
    bottom: 0px;
}

If I’ve not used up my 9 lives yet, any ideas how I can get this to display better in mobile view?

Problem is that you have background color and border set to li a like: .poems li a, .reviews li a, .fiction li a element and it should be just to li element

.poems li a, .reviews li a, .fiction li a {
    background-color: transparent;
    border: none;
    line-height: 0;
}

.poems li, .reviews li, .fiction li {
    float: none;
    word-wrap: normal;
    height: 50px;
    background-color: #ffaa80;
    border: 2px solid;
    display: block;
    min-width: 300px;
    max-width: 500px;
    margin: 1em auto;
}

OR try to use !important property where it is absolutely needed.
Do not use it much!!!!!!!!!!.

.poems li a, .reviews li a, .fiction li a {
    background-color: transparent!important;
    border: none!important;
    line-height: 0!important;
}

.poems li, .reviews li, .fiction li {
    float: none!important;
    word-wrap: normal!important;
    height: 50px!important;
    background-color: #ffaa80!important;
    border: 2px solid!important;
    display: block!important;
    min-width: 300px!important;
    max-width: 500px!important;
    margin: 1em auto!important;
}

SCREENSHOT

Hope this will help
You have used 8.5 of your lifes. ??
Cheers
@tahoerock