I am just developing a child theme of WordPress twenty eleven theme. The live demo can be seen here. As WordPress has already responsive support I am also doing my theme in responsive for that I am customizing my theme CSS. For some of the part I am done. In my menu part I am facing some problems. I have two types of menus. One which doesn't have dropdowns and the others which have dropdowns. Now I am facing the problem in the menus which have dropdowns in responsive. So can someone kindly help me here?
This seems like more of a design issue than a technical one. I would recommend either 1) turning the drop down menus into accordion menus (e.g., tiny accordion), or 2) extending the drop down menu region and increasing its z-index so that you can only hover over the drop down and not activate anything that appears underneath it. For your design, this might mean increasing the z-index and using something like margin-top: -2px; on the drop down menu's children.
The idea of responsive design, however, is that you make it available for small devices, like smart phones. Since smart phones that use touch don't have hover states, you're probably better offer using suggestion 1 above, where a user clicks on the initial menu, which then displays its sub-menu.
Related
Creating a menu in WordPress. Instead of making the drop down menu to be vertical, I want the drop down menu to be horizontal.
See this website for an example. Hover over OUR SECTORS to see the menu. The menu I want doesn't have to be full width on the screen.
Couldn't find any solutions for this yet. Only found solutions for multiple menu columns, like done with the Max Mega Menu. I don't want to have multiple columns, but just a horizontal menu.
Is there any CSS or plugin available for this?
Edit: Website of the theme with the same menu here
I would give the <ul> a style of display: flex. Then you can move around the flex items with justify-content.
You can read this article for more information about flexbox.
Sorry, it is really hard to help you without any examples.
I would like to set up a horizontal navbar to scroll inside the page in the style of uber eats (https://www.ubereats.com/en-EN/new-york/food-delivery/zafis-luncheonette-les/-VDewOpIRMe4mh2tNVzVCw/ ,check the second navbar in which you can navigate throught the different categories of the menu). I managed to create the navbar and set the spyscroll but I don't know how to reproduce the responsive behaviour : how to hide the category from the navbar when it overflow and add it to the "More..." dropdown ?
I hope my question was clear enought !
Thanks for your help
What You are looking for is called a "Priority Navigation". Just Google it, there are plenty of examples and plugins out there.
e.g. https://css-tricks.com/the-priority-navigation-pattern/ or http://gijsroge.github.io/priority-nav.js/
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
The website I am working on does not use the Bootstrap navbar for desktop version, utilising the responsive navbar (and hiding the custom navigation) on the mobile version. The navbar, without the actual links, is present even in the desktop version, displaying the branding and the search form.
However, the problem is that the website ends up with three navigation types:
1) The custom navigation unit, used on the desktop version.
2) The collapsed navbar with a toggle button
3) The default "navigation links in navbar" on most of the tablets. I want to get rid of this one: there are too many links (can not do much changes to the website structure) and it looks noisy.
Is it possible Bootstrap's navbar always collapsed?
This is not a direct answer to your question, but I think it might help you resolve your situation.
Consider using the Bootstrap Responsive Utility classes to hide certain navigation elements. For instance, maybe apply the hidden-desktop class to the menu items inside the navbar.
Scroll to the bottom of this page to see the classes:
http://twitter.github.io/bootstrap/scaffolding.html#responsive
I have a client that is looking for a Wordpress plugin or theme that will display an image over a rotating slider, similar to the home page here: https://www.threebakers.com/
Any thoughts on an out-of-the box solution, or do I need to build this one by hand?
Ironically, I did this exact thing on this site here:
http://www.gilbertmeatlocker.com
Its using the popular Flex Slider, but its not Wordpress. I was working with Drupal on that particular site, so its a custom implement of the stand-alone javascript Flex Slider.
I had to fiddle around with z-index and I used negative-margins to move elements into position.
That particular implementation on gilbertmeatlocker.com is extra complex because the silver frame around the edge is also overlapping the Flex Slider. I would recommend not doing a frame like this if possible, though. It added some serious bugs that were difficult to make work on all browsers.
Putting a single image over the slider like your bakery example or the gilbertmeatlocker.com logo shouldn't be a problem though.
If noone else recommends something better, you could try Flex Slider. There is a Wordpress version of it.