I want to convert this HTML site to Wordpress using Elementor. as you can see all navbar links have their own icons, I can design it by sepread icon and text below it but also I want it to be dynamic (can be managed in WP nav menu page) is there any elementor widget to do that? or can be done programmatically using codes?
search "Elementor vertical side menu" or something similar you'll find some solutions.
Thi is an example:
Elementor Vertical Header with Sidebar Navigation Menu in WordPress | Elementor Side Vertical Menu
Related
The problem that I have is with website responsiveness on mobile.
Note that I'm using WordPress & Elementor to build this.
A client asked me to provide a header menu as a top bar & main bar, Bluehost is a good example of what I'm trying to achieve:
Desktop version: https://i.stack.imgur.com/RRSHz.png
Mobile version: https://i.stack.imgur.com/8QKO4.png
In Elementor, both the top bar & main bar were interpreted as separate nav menus, therefore, on Desktop it was fine, but on mobile there were two hamburger buttons. I'm not sure how can I make both bars shrink in one mobile menu like on Bluehost, can anyone help?
Here are screenshots of my scenario:
Desktop version: https://i.stack.imgur.com/37sSJ.png
Mobile version: https://i.stack.imgur.com/oxfEY.png
Okay it should be easy.
On Desktop
Make two menu
top bar
main bar
Top bar contains all the stuff which is shown in the desktop image. Main bar contains all the stuff which are there in image + the item on the top bar.
Add CSS to hide them on desktop.
on Mobile
Make top bar hidden. Turn main bar to hamburger, turn on the display for the items which are from top bar.
You can also reverse the scenario and have all item on top with hidden main items and show them when on mobile.
I have created two (2) menu bar in WordPress. In this two menu bar, I have set them into two separated CSS style. My problems is the CSS is Not showing on my secondary navbar / menu bar. Can anyone help me with this?
Any help will be appreciated!
I'm creating an ordering website with a layout like this and I'm still an amateur in creating a website so I want to ask how will I link the SIDEBAR and MENU BAR that when clicked, it will display in the container of the PRODUCTS only and in the same page like in frameset. Thank you.
HERE'S THE LINK OF MY LAYOUT:
http://tinypic.com/view.php?pic=zn2w8&s=8#.VIe0nzGUeAk
use an a href tag on both sidebar and menu bar with an anchor set, where the a tag has classes that will be opened in an iframe like fancybox.
http://fancybox.net/
I am creating a theme with Bootstrap and I would like my top menu to have:
about, home, contact etc., and another icon for messages. (you can check this image)
But when the page is viewed on mobile I would like the menu to collapse as in this image
But only the messages icon to be still visible.
Currently it is not, any ideas how I can do that?
Wrap the image icon with .visible-xs class example:
<img class="visible-xs" src="...">
Here is the link for more information:
Responsive utilities
I'm having an issue with the Twitter Bootstrap template. At http://www.tjprizbiz.com/new/publications.html, I am trying to have my side bar nav jump to each different project, but since all my projects are contained in a span9, anytime I click a side nav bar option it just goes to the top of my container span9 projects column. I know I need to fix my href of the sidebar nav buttons but I don't know how to make it search within the span9 section id's. Any Ideas?
PS: I cant get my code to paste but you can get the page source # www.tjprizbiz.com/new/publications.html