Remove Widget bar on mobile devices
-
hi all.
i am in the process of rebuilding my blog. and i have noticed on mobile devices all my widgets are forced to the bottom of the page, this looks really messy and i would like to remove completely when viewed on a mobile device.i enabled the mobile version of the site but it doesn’t display transparencies on my images and looks fairly terrible.
i have tried the below code in custom CSS … but that doesn’t seem to work. could someone please point me in the right direction as to what i am doing wrong. thanks
@media(max-width:640px) {
.div#secondary.widget-area {
display: none;
}
}The blog I need help with is: (visible only to logged in users)
-
i figured it would be better suited here rather than support .. ill request the other one be closed
-
-
Hi there, on responsive width themes such as Truly Minimal, the sidebar is moved to the bottom on smaller screens to make your content as clear and readable as possible on smaller devices. I see you have added the following CSS to hide the sidebar on Truly Minimal for devices and screens less than 900px in width.
@media screen and (max-width: 900px) { #main #secondary { display: none; } .main-navigation div.nav-menu > ul { display: block; } }Is there anything else we can help with at this time? Your site is looking great, by the way.
-
thank you ….
and actually yes … i don’t really like the full mobile site so i have disabled it … which is fine
when i look at the site on a phone the menu becomes a single word saying ‘MENU’ with a dot point drop down of my menu items.
i can live with this but the submenus are not displaying… is there any way to fix this …
or force the desktop menu to smaller screens?, perhaps across two lines?i can move this to its own thread if you would prefer
thanks again -
You can add this to the very end of your custom CSS to display the submenu items. They will as an indented unordered list under Recipes. Flyout or dropdown submenus can be problematic on small devices.
.main-small-navigation ul { display: block; }Although with enough CSS, the main menu could be made to stay visible, they typically get very crowded and hard to use on small devices because the “tap targets” for each of the menu items have to be a larger size so that people can easily click on them.
-
great … two last things and i think I’m done.
i have also managed to force it on for iPads as well … doesn’t look quite as nice but more functional.1. the Text that says ‘Menu’ can i replace that value with an image
and
2. on the desktop site is it possible to make the drop down menu display horizontal under the menu text? -
1. the Text that says ‘Menu’ can i replace that value with an image
Add the following CSS and replace URL_OF_IMAGE with the URL of the image you want to replace “Menu”.
.navigation-main .menu-toggle { background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); }2. on the desktop site is it possible to make the drop down menu display horizontal under the menu text?
This can sometimes be a bit tricky. Add the following CSS and then play with it to make sure everything works right. I’ve limited this to browser/screen widths 900px or wider because under that, the minified menu activates and it would ummm… errr… blow up with this change.
@media screen and (min-width: 900px) { .navigation-main ul li:hover > ul { display: flex; } .navigation-main ul ul a { width: 70px; } .navigation-main ul ul { left: -180px; } } -
thanks that worked really well …
i have added some social media links to the top menu and replaced them with images …
is there any way to make them site closer together? i have messed around with padding but that didn’t seem to do anything.
i want to have the icons aligned to the right of the menu separate from the rest of the menu options.any help would be appreciated …
i will be happy when this is over :D -
Hmm, the icons are simply menu items, and so I’m not really certain how to move some of them to the right and reduce padding without affecting the entire menu.
What you could do instead is create your social media buttons in a Text widget in the sidebar, and then use CSS to move that up into the menu bar and to the right.
The problem with this, though, is that your social media buttons won’t show on mobile devices, because they aren’t actually added to your menu itself — just floated up into the area.
If you’d like to try it out anyway, you can create the buttons in this way:
http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/Then position them with something like:
#(whatever text widget ID) { position: absolute; left: 950px; top: 500px; z-index: 2; } -
alternatively can i reduce the padding on the just the icons so they sit closer together? or is it more of a global menu setting?
-
also i am trying to change the Menu Fonts …
closest thing to a type writer that is natively supported is courier new
i have loaded the font family as follows.navigation-main ul { font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; text-align: center; font-weight: normal; font-size: 18px; }but the font is a bit thin …. when i up the font size to around 20 it looks good however the alignments on the drop down menus are all off and Lunch sits really close to the end of breakfast for some reason.
any ideas how this can be rectified?
-
alternatively can i reduce the padding on the just the icons so they sit closer together? or is it more of a global menu setting?
Have you tried adding
margin: 0px;to each of those four menu items? It seems to scoot them together when I preview.but the font is a bit thin …. when i up the font size to around 20 it looks good however the alignments on the drop down menus are all off and Lunch sits really close to the end of breakfast for some reason.
This has to do with the widths you’ve applied to the menu in your CSS. I played around with replacing some of those values, and this seemed to look pretty good:
@media screen and (min-width: 900px) { .navigation-main ul li:hover > ul { display: flex; } .navigation-main ul ul a { width: 100px; } .navigation-main ul ul { left: -320px; right: -190px; } }Let me know what you think!
-
awesome … i have changed my width to :auto rather than 100 px and that seems to have fixed the spacing issue.
i have noticed some weird behaviour in chrome
when i hover over Recipes the alignments are out.
this doesn’t happen in safari and firefox.
however when i mouse off onto a none menu item i.e in-between the words or up onto the background. the text will flick back to its correct alignment for a few seconds before the drop down disappears.are there any particular CSS tags that chrome doesn’t like?
-
Hi there,
I see it, too — it seems like it’s this bit that’s making it happen:
.navigation-main ul li:hover > ul { display: flex; }I don’t immediately see anything else changing when I remove that bit, but be sure to double-check me in a couple browsers and make sure I didn’t miss anything. :)
-
great … looks pretty consistent on safari, firefox, chrome and IE, not sure what version of IE I’m running i think 9 or 10
but good enough for me
- The topic ‘Remove Widget bar on mobile devices’ is closed to new replies.
WordPress.com Forums 