I have a hamburger menu icon that is linked to a dropdown navigation menu at (top left side of screen) as shown in following link:
http://tahoe-luxury-properties.com/index2.html
I want to make it so when the the hamburger menu (3 bars) are clicked, the menu drops flush to where the top nav bar ends. So right now you can see the top nav bars color underneath the drop down. It is sort of hard to explain, but I want it to look more like this picture at below link:
http://integratedresourcemgmt.com/navmen.html
I just want it so there isn't the overlaying color making it seem disjointed, in a sense.
I tried moving the hamburger menu down and I couldn't get it right. I was thinking that since I can adjust the size of the navigation-menu (width, padding) there must be away to move it down without moving the hamburger and nav exit icons/rollovers. I have been fooling with this for a while and am just not sure if it is possible? Any ideas? Thanks so much. -Beth
Related
Okay, I really like a vertical header and horizontal scrolling. I really went down a rabbit hole with this tutorial from Elementor Academy - https://elementor.com/academy/how-to-create-a-horizontal-scrolling-website-advanced-pro/ . I cannot get the website to scroll horizontally using the JavaScript provided in the tutorial. stackoverflow would not let me enter the JavaScript so you will have to view it from the link
This was working in the sections. I am trying this in the containers. I created a parent container and set the content width to full and the direction to horizontal. I then added child containers for each of the horizontal pages. Each child container is set to full width and the min height is set to 100VH. I just cannot figure out how to switch the navigation arrows on the keyboard using JavaScript to scroll horizontally. Switching the down arrow to the right arrow and switching the up arrow to the left arrow.
I have tried several JavaScripts to horizontally scroll the child containers within the parent container. I can scroll with the left and right navigation arrows on the keyboard. What I expect after applying the Java Script is for the down navigation arrow to scroll right and the up navigation arrow to scroll left.
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us and top menu not sticking out onto carousel.
Does any one know how to use javascript with a media query?
I am wanting a left column menu which is hidden in mobile view using the bootstap 3 hidden-xs but I want to be able to click a menu button which overlays the left column over the main content area - which an x to close the menu. using
function showFunction()
{
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction()
{
document.getElementById("left-col").style.visibility="hidden";
}
When testing this in a broswer this works OK but once I have clicked the cross to close the menu if I resize the screen to desktop or above the break point of the media query the left-col remains hidden.
Is there anyway around this? Or is it a waste of time trying and the benefit of this would work on a mobile rather than users on desktops resizing browsers.
Update --
In Desktop view I have 3 columns left Main Right with a header and a footer.
In Mobile I am stacking the right colum under the main hiding the left column on default
By clicking a menu icon i am displaying the left navigation over the main content, and click a cross on the left col to hide it.
But once I close the left-col when I resize to desktop - the left col stays visible and I want it to be forced back.
Thanks
Any help would be great.
Thanks
I have used the superfish JQuery for horizontal menu. My Problem is rightmost menu item if user hover the childmenu item displays but user need to scroll horizontally to see that childmenu. Is there any mechanism to resolve this issue by autos-crolling or displaying child-menu in left side?
Please help.
This problem sounds trivial, but i got headache trying to solve it. I downloaded this free and simple menu from javascript-array.com/scripts/simple_drop_down_menu/ (code is included on the page). It's ok, it works fine, but i don't know what should i change in order to make it align in different way. As you can see from the example, dropdown menu (shown when user position his mouse over top menu) has the same left margin as top menu (top menu, for example "help" is LEFT-aligned with corresponding dropdown menu).
What should i do in order to make dropdown RIGHT-aligned - align RIGHT margin of dropdown menu with right margin of top menu (for example, right margin of "help" dropdown to be aligned with right margin of "help" button).
In some c-like language it would be easy: dropDiv.left=(TopDiv.left+topDiv.width)-dropDiv.width but i have no idea how to do it for that menu from page i'v posted.... :\
Please help!
use tables, you can align all your elements as desired..!
In the <style> block (included in your <body> section), under #sddm div a simply change text-align: left; to text-align: right; and then your listed menu items will align right.