0

I should first mention I am fairly new to wordpress and web development.

I was given the task to update an existing site which includes the navigation bar. I have been digging through code trying to figure out where the actual code has been stored for the nav. The site is a custom build theme which looks to be built using the "Bones" theme. I've tried using the customizer to alter nav but there are no options available for what is needed. I've accessed the hosting through ftp and reviewed the php files in httpdocs/wp-content/themes etc. The closest thing I've found was in the header.php in the themes>"custom theme">header.php, however, this does not contain the full menu it only references the logo and one outdated dropdown button. I am getting nowhere.

The nav bar should be altered from this: enter image description here

to this: enter image description here

I hope this makes more sense with a visual.

The site is cowboycauldron.com

I appreciate any help.

Thanks

  • WordPress creates the menu dynamically using the contents from the menu editor (under appearance) and what's known as a Nav Walker. This iterates through each element to create the HTML markup. – jdm2112 Jan 30 at 20:16
  • Thanks for clarifying how the menu is created. This has been a real learning experience and that does make more sense. Now I just need to figure out how to move the navigation items as pictured above. – Tron_fan Jan 30 at 20:21
  • I can't think of a solution that isn't hacky somehow. To be responsive across multiple screen and device sizes, the logo needs to be in the layout flow and occupy its own space allowing the <li> menu elements to flow around it naturally. This will be tricky if you new to web dev. Have you got a local or staging copy of the site to break without taking down the production (live) site? – jdm2112 Jan 30 at 20:27
  • There is no staging copy of the site setup. I'm glad I am not the only one thinking this is a tricky nightmare at this point. it's frustrating but at least I know I'm not crazy lol. – Tron_fan Jan 30 at 20:37
0

The first step is to make the "Shopping Nav" Active. It's currently set to "display:none" in the css, probably because the menu isn't active. Once you change display:none on that menu, then you can start positioning it to be split from the other menu at the top of the screen.

This is what needs to be changed in the CSS. Not directly, though. You need to change the menu to display in your settings. This is what I see when I look at the HTML of your site:

nav.shopping-nav {
     display: none;
}
  • Thank you for your detailed reply and the time you took to review the code, I appreciate it. I'm not trying to get the shopping nav working, the navigation buttons work as they are, I just need to move them around as described above. I am unable to find the file that the nav menu code is located in and the appearance>customize doesn't allow me to add any custom css to position them. – Tron_fan Jan 30 at 19:45
  • Are you using two separate menus so you can display one on the left and one on the right? If not, then you should. Once the second menu is active, you can reposition it in the css. I always use the main css file wp-content/themes/themename/style.css to edit css. It doessn't matter where the existing css is, just override it in style.css or change existing code in style.css in the theme folder if you find it in there. – amatusko Jan 30 at 19:51
  • I don't know about two separate menus as I didn't create/build this site. I am honestly lost as to how they built this site. I've checked the style.css file and it looks like the original creator didn't even use css they used something called Sass which I've never heard of or used before. – Tron_fan Jan 30 at 20:04
  • If you want to split the navigation the way you have described, then you need to use two menus. There may be a way to cobble together a single menu setup to do it but it's going to be a complete mess. SASS is a compiler for CSS and requires knowledge of a separate language. It's not terrible to pick up. – amatusko Jan 30 at 21:55
  • @ amatusko thank you for the response. I will continue my quest to fix this. – Tron_fan Feb 1 at 15:58
-1

On your Dashboard, go to appearance -> menus and add the pages you want to the menu

  • The pages are already there, they just aren't split to either side of the Logo like the client is asking for. If you go to the site you can see all the pages/links are in place I need to move them around as described above. – Tron_fan Jan 30 at 18:40
  • Is "talk to us" in the same menu as the rest, in appearance->menus? – Karl Poppery Jan 30 at 18:52
  • Yes, talk to us is in the appearance>menus as well. – Tron_fan Jan 30 at 19:11
  • Right. You could simply add: @media only screen and (min-width: 1030px){ .nav li:nth-child(4){float:right!important}} as custom CSS. Or find the original CSS and make the correction. – Karl Poppery Jan 30 at 19:23
  • That's one of my issues, I cannot find where the original css code is located for the nav menu. I'm also not sure how the custom css would alter the theme that was custom made either. – Tron_fan Jan 30 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.