Menu adjustments Hemingway Rewritten
-
Hi my menu’s are coming along after some help from WP staff and browsing old threads sniping snippets, but still having some issues I can’t seem to fix.
[Global] My sub menu’s are too large – the distance between menu items is extreme top/bottom and they also extend too far to the right. I have tried a padding-top / padding-bottom fix I found, but it only seemed to increase padding – it seems the distance between sub menu items is determined by some other attribute.
[>800 px] Would like to try a dark grey border around sub menus
[<800px] There is a space the colour of the menu background on the left of each child menu. I want to a) remove it all together or b) reduce it’s size and make it dark grey like the main menu border
Any help would be much appreciated
The blog I need help with is: (visible only to logged in users)
-
Update:
Have fixed sub menu width problem on screens >800px, but still struggling with sub menu item height globally … also width fix does not work on mobile menus, seems to compound layout issues. -
Hi @meanfxspreads, someone flagged this thread for staff attention. Thanks for your patience.
Right now the menu width on my laptop screen actually looks pretty good. Especially since you have drop-down menus on some items, I really do not recommend cutting down the space between them. If you wanted to do it anyway, you might also try reducing the space between the letters a bit:
.main-navigation a, .main-navigation a:visited { letter-spacing: .25px; padding: 1.25em .75em; }There is a space the colour of the menu background on the left of each child menu. I want to a) remove it all together or b) reduce it’s size and make it dark grey like the main menu border
How do you plan to indicate it is a sub menu?
-
Hi Suernovia – thanks for getting back to me.
Yes – I fixed the sub menu width problem on screens > 800px already as stated above so will look fine on laptop.
I still need to reduce vertical distance between sub menu items globally and width fix did not work on mobile screens. Sub menu’s on mobile screens currently extend past the boundaries of the main menu and I think this looks really sloppy. You’re probably right in that removing the space before mobile sub items completely isn’t a good idea, but I would like to reduce the width of the space and/or change the colour.
Would also like to try a dark grey border around sub menu’s globally.
Thanks,
Oscar. -
You might try something like this in your min-width 800px section:
.main-navigation a, .main-navigation a:visited { padding: .75em 1em; } .main-navigation ul ul { top: 1.9em; } .main-navigation ul ul a { padding: .75em 1em; }For the mobile toggle one, in your smaller screen section, you might try this, though it may conflict with what you’ve got.
@media only screen and (max-width: 800px) { .main-navigation ul ul li a, .main-navigation ul li a { padding: .5em; } .main-navigation ul ul li a { width: 99%; margin-left: 1%; } .main-navigation ul ul li, .main-navigation ul li { background-color: #777; } } -
Hi, thanks for prompt response and sorry about delayed reply – Fiddled a little and looks great now!
I have a few more issues if you don’t mind:
– Possible to specify a minimum image height? The logos in our tables are only 40 pixels tall yet they are being shrunk on mobile and tablet screens and become completely illegible. This is a major issue.
– Possible to force center align images on small screens? Right align looks really bad on mobile
– Not sure if I need a business plan for this but when I tweet pages and posts twitter is showing first on page image instead of logo. This works and is desirable for our chart section, but looks really poor for our comparison tables (home page, broker comparison). Anyway of forcing logo if image is smaller than a certain size?
– Category description currently shows on Broker Comparison category – need to disable this.
Any help you could offer would be much appreciated, especially with the first problem.
-
– Changing the height without accounting for the width will give you squishy looking images, so we won’t recommend that. And the table already runs off the side on mobile. You may need to rethink how to display that data. Recommended reading:
https://css-tricks.com/responsive-data-tables/– I’d recommend making images full width on mobile if possible, then alignment won’t be an issue.
– For twitter cards, be sure to add a featured image to each post or page and use it in that post or page.
– If you need to hide parts of a page, right-click and choose to inspect the element. You can find its class and hide it like so in your CSS:
.category-forex-broker-comparison .taxonomy-description { display: none; } -
Hi Supernovia,
– This table is responsive, it provides the user with a scrollable table on small screens. Re images: don’t want to change proportions of an image … how would I go about setting a small screen minimum image width and height simultaneously? (or a minimum cell width/height?).
– Full width images on mobile – cool, how do I do this?
– Twitter cards, this isn’t feasible, don’t want our logo to appear on every post, it’s already in the header. I might try setting a featured image and hiding it, see if Twitter picks it up still. Could you please provide me with code for hiding a featured image for posts. Tried one from another thread/theme but didn’t work for Hemingway.
– Great, thanks a lot.
-
So to clarify you intend for your logo to show up every time as the twitter card? I don’t know whether the cards are meant for that. Wouldn’t your logo be in your twitter profile image?
RE: images in the table, maybe this would help in your mobile-sized CSS section:
td { padding: 0; vertical-align: middle; } td img { min-width: 100px; }RE: full width images on mobile, send a link to a page or post that’s giving you trouble. I’ll take a look.
-
Hi S,
Have decided to do away with images in tables and right align images all together, so that’s that sorted!Re: Twitter cards … it’s not really a matter of me wanting our logo on every tweet … it’s a matter of not wanting a zoomed in pixelated portion of an affiliate banner as the twitter card this looks SO bad.
Is it possible to either force logo with CSS or have a ‘featured’ image that isn’t actually displayed on page but twitter will pick up? I’ve contacted twitter too, but imagine they will refer me back to WP support.
-
Is it possible to set a featured image for your posts and pages or would that not work in your theme? You can use the same one repeatedly if you want to.
-
Stylistically, I’d prefer not to have any graphical content other than the odd affiliate banner.
This theme replaces header image with a featured image if there is one – Is there code I can try to stop it from doing that? Then I can try setting a featured image (theme doesn’t display it on page by default) and see if twitter picks it up for a card.
-
@meanfxspreads I am not sure whether it would work for Twitter or not, but we could try setting a featured image but hiding with CSS. Want to give that a go?
Or, what if you just set the current header image as the featured image?
-
Hey S,
Yeah thanks I’d like to try option 1 because if it works, that will allow me to choose what the twitter card looks like for individual posts/pages -
Okay. You’ll have to put something up for testing, so let me know when you’ve done that.
-
Hi S,
Sorry been really busy – actually just tried your second option of using header image as the featured and that works and actually looks quite good for the twitter card. On pages that do have a picture I’d prefer as the card I just won’t set the featured – thanks for the your help! -
No problem. I’ll go ahead and close this thread, but if you need more help, let us know. Cheers :)
- The topic ‘Menu adjustments Hemingway Rewritten’ is closed to new replies.
WordPress.com Forums 