I want my pages on the menu to be shown on one line rather than like a drop down menu
-
I have the sketch theme, with an upgrade.
I want my pages in the menu to be shown on one single line/row in the top right corner rather than like a drop down menu.
Like this: PRODUKT – BLOGG – OM OSS – KONTAKT
NOT like this: MENY (and then when you press “meny” the pages/menus appears under each other on the left side.
I hope you understand what I mean:)The blog I need help with is: (visible only to logged in users)
-
Hi!
It looks like you were able to get this figured out already. Here’s what I’m seeing on your site:
Can you let me know if you need any additional help?
-
Thank you for your reply Jeremey! Unfortunateluy, I have not figured it out yet. What you are seeing on the link you sent is what I want it to look like, and what I’m also seeing on my new MacBook Air. But on my older MacBook Pro and on my iPad it looks different. There I see it as a drop down menu named “MENY”. Does it have something to do with the version of OS etc?
I do not understand why it looks different on different devices. I want it to look like the link you sent on all devices. Hope to hear from you again;) -
Hi!
On the iPad, it will look a bit different. It should look like this:
When you click the “Meny” link, you should see your menu. This is part of the responsive design of the theme that makes sure it looks great across all screen sizes.
On your MacBook Pro though, it shouldn’t appear that way. Can you make sure your browser window is maximized?
-
The link you sent ( http://d.pr/i/dgCp ) is exactly how it looks like on my iPad and on my MacBook pro. It looks like this even with maximized browser window on my MacBook pro. Is there a way I can change the menu to look like the first link you sent ( http://d.pr/i/14TSy ) on all devices? A CSS code or something? I like that design much better:)
-
The link you sent ( http://d.pr/i/dgCp ) is exactly how it looks like on my iPad and on my MacBook pro. It looks like this even with maximized browser window on my MacBook pro.
This shouldn’t be how it appears on your MacBook Pro screen. Could you make sure your browser isn’t zoomed in at all? In Safari, you can accomplish this using the View menu item and selecting “Actual Size.”
Is there a way I can change the menu to look like the first link you sent ( http://d.pr/i/14TSy ) on all devices? A CSS code or something? I like that design much better:)
Yep! You could give something like this a try under Appearance -> Customize -> CSS:
.menu-toggle { display: none; }That should remove the “Meny” toggle button and just display the menu in a vertical list on smaller device sizes.
-
Hi again Jeremey!
Thank you very much for your replies! My macbook pro is quite old, so it might have something to do with that. An OS X Version 10.8.5. I still see the “menu” toggle button even with the “actual size”. But as long as my customers/viewers see it the way I want I am happy.
I tried the CSS you suggested but then the whole menu disappeared (I did not see any vertical list) both on my macbook pro and on my iPad, so I had to remove it again. Any other suggestion? Any way it can appear horizontally on small devices too? -
HI!
Really sorry – that was a terrible attempt. :) This should be much better:
.main-navigation ul:first-child { display: block; } .has-site-logo .main-navigation { height: auto; } .menu-toggle { display: none; }Can you give that a try?
-
Hi again!
Thanks again! That works, the menu to appear on the left side vertically. But I still want it to appear on the right side horizontally like on the bigger devices (http://d.pr/i/14TSy). Sorry for being so difficult;) Is that possible?? -
Not a problem! Let’s give this a try:
@media only screen and (max-width: 1024px) { .main-navigation ul:first-child { display: block; } .main-navigation li { position: relative; display: inline; font-size: 12px; padding: 5px; } .main-navigation li a { border-bottom: none; } .has-site-logo .main-navigation { height: auto; } .menu-toggle { display: none; } } @media only screen and (max-width: 480px) { .main-navigation li { font-size: 10px; } }This should move the menu to an inline list. It won’t move it up to the right-hand side as that’s going to be squished on smaller screen sizes. However, it should display it underneath the site logo.
Again, this is specific to the Sketch theme.
-
Thank you very much Jeremey!
One more question: Do you know how I can remove the date from my posts? I do not update the blog very often and do not want my readers to see how long time it has gone since the last post;)
Thank you! -
This CSS should remove dates beneath the post titles on your all posts / blog page
and
from the individual post page:
span.posted-on, span.sep { display: none; }Your visitors will still be able too see the date in the permalink in the address bar: https://bybjorkheim.wordpress.com/2014/04/20/sunday-mix/
But we can’t change the permalink structure on WordPress.com.
-
-
Thank you very much for the help Jeremey and chaitanyamsv!
1 more question: I would like to remove the grey faded line that appear on the top of all pages and the grey lines that separate the widgets on the sidebar (on the blogg page). How can I do that? CSS?
Thanks for help and have a great christmas!
Best Ase
-
Hi Ase, add the following CSS to get rid of the grey bottom border line on the header:
.site-header { border: none; } -
Thank you thesacredpath!
That solved the problem with the grey line above the posts. I still want to remove the grey lines between the widgets on the side bar (I only have widgets on the sidebar on my blog page). Do you know how to do that?
Best, Aase -
That gray line is the bottom border of the widgets which can be removed using this style:
.widget { border-bottom: none; }
- The topic ‘I want my pages on the menu to be shown on one line rather than like a drop down menu’ is closed to new replies.
WordPress.com Forums 