how to arrange wordpress menu items in a vertical layout

Looking to display the sub-submenus of my site beneath their parent menu node similar to the layout of the Oracle website. Utilized a theme called Oracle, and it's visually appealing. Now, the goal is to exhibit the sub sub menus directly under their parents (ideally in columns), without the need for hovering over the parent. Need guidance on how to adjust the code for menu and submenu creation to modify the resulting HTML and CSS output.

Answer №1

If you want to enhance the functionality of the website's menu, you'll need to make changes to the php files that control it and add new sub-menus if necessary. The sub-sub-menus will appear when a user hovers over certain elements. You can find the styles related to this at around line 455 in the CSS file, style.css. If you're unsure of where to begin, you can use the web inspector tools in Chrome and Firefox to locate the exact line numbers of the styles you need to edit. Best of luck with your edits!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vertically aligning text in separate div containers

Currently, part of my dashboard page is styled using the Bulma CSS framework. One feature is a 'Widgets' feature with three large containers displaying key facts such as the number of sales, new customers, etc. The issue I'm facing is that ...

Creating consistent div sizes for varying image and title lengths in bootstrap

In my angular project, I am receiving data in the form of image, title, and location. Despite my efforts to create a responsive div, I have been unsuccessful in achieving uniform sizes. <div *ngFor="let company of companies" class=" ...

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

Contrasting results when logging an element in Chrome versus IE

Running the script below in Internet Explorer gives the expected output for console.log(target_el): <div class="hidden"></div> However, when run in Chrome, the output changes to: <div class="visible"></div> To add a humorous twi ...

The issue arises when attempting to render an SVG with JavaScript embedded inside using the img, object, or

Issue with the title ... please follow these steps: (view codes below) Create an svg + open it separately (name it keysaway.svg) Create html + open it individually When you observe, the svg displays a simple up and down animation but fails to work when l ...

jQuery Accordion not showing up on screen

On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master. Here is the code for LaunchPage.Master: <html> <he ...

Troubleshooting sound problems in Angular JS

Can anyone help with pausing an AngularJS audio when the browser window is closed and resuming it when the window is maximized? I'm new to AngularJS and have no idea how to achieve this. var app=angular.module("myApp",['ngAudio']); ...

Why won't my code work with a jQuery selector?

I'm struggling to retrieve the value from a dynamically generated <div> using jQuery. It seems like the syntax I'm using doesn't recognize the div with an id tag. The HTML code is stored in a variable, and below is a snippet of code w ...

Add CSS styling to a particular div element when a button is clicked

I have been working on a new feature that involves highlighting a div in a specific color and changing the mouse pointer to a hand cursor. I successfully achieved this by adding a CSS class: .changePointer:hover { cursor: pointer; background-color ...

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

Adjusting the slider with jQuery and CSS to extend beyond 100% while remaining within the div boundaries

Currently, I'm working on customizing a jQuery slider. My goal is to achieve the same functionality as the jQuery UI slider where you can set a max value like "2500" and the slider will smoothly adjust without going outside of the specified div or scr ...

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...

The height percentage is not functioning properly even though it has been applied to the html, body, and all wrapper elements

I've been facing a persistent challenge with the height:100% problem. It seems like it should be an easy fix by ensuring all wrapper elements and html, body have height:100%, but no matter what I try, the containers still won't reach the bottom o ...

Connecting static CSS files to Django

I am fairly new to working with Django and I am having trouble linking CSS to my project. I have included the necessary static settings in my app's configuration, which allows me to access images in the static folder without any issues. However, when ...

The Heroku application is rendering with different CSS and positioning compared to the local development environment

My locally hosted site has correct CSS and positioning, but once deployed to Heroku, it appears to lose some of its CSS styles. I am using the MERN Stack for this project. I suspect that the issue may be related to my node_modules, even though I have them ...

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

TaffyDB is throwing an error message indicating that TAFFY is not recognized as a function

I am currently developing a web-based game using HTML, CSS & JavaScript within Visual Studio and utilizing TaffyDB as my database. However, I have encountered an error when trying to create a database using the TAFFY function, as it keeps showing up in the ...

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

I need to create a list with dynamic data using a loop. When I click on any item in the list, I want the image associated with that item to change to a second image (dummyimage.com/300.png/09f/fff) to indicate it's active. This change should persist e ...