Primary navbar

[Kim LaGrow]

I am working on a test site for a client: http://www.beyondcompare.com is the test site. I would like to have the menu stretch all the way across the header. I’ve tried adding css to change the navbar to 100% (in the child theme), but it doesn’t seem to work. Can you help?

[Sushil Adhikari]

**I moved this topic to the Circumference forum.
As for your question…this theme offers two main menu locations, the Primary and a Secondary. The primary menu is the shorter one that sits to the right of the logo, and the secondary is a full width menu that goes along the bottom of the header area but above the banner area. This one is used for larger menus or if someone wants the menu to stretch full width. So with your menu, uncheck the Primary location and select the Secondary one. It’s a slight different style, but it will go full with.

[Kim LaGrow]

Thanks so much! That fixed my nav menu question, but for some reason, I am unable to see the menu in ‘mobile’ view. Does this menu work with mobile devices? Sorry for all the questions! I love this theme.

[Sushil Adhikari]

First, never say sorry for the questions…this is what support is for 🙂
As for your menu on mobile, it should be working but when I went to your site, I noticed the menu gets hidden…it should not be doing that. I just tried this on my local test site and the menu works fine. Something is unique about your site then for this to be happening. Did you make any code changes? It looks like you did for the top header area…I’m thinking something there is affecting the menu. Hate to say this, but you may need to start over by doing the menu first, then redo your header stuff and then which each one you do, test the menu in mobile view.

[Kim LaGrow]

Okay – yes, I am setting up a custom (3 section) header – which I’ve been struggling with. I’ll remove that and see what happens. It looks like maybe I need to keep that customization within the logo div… I’m sure I’ll have more questions. Thanks so much for your assistance!

[Sushil Adhikari]

It’s a tricky area to work with, but one note that if you want to have 3 columns of elements, including the logo, you want to make sure the containers side-by-side are coded correctly based on how the Bootstrap framework works…right now your header area looks like this:

             
        
			
			

				
					
				
			
Dedicated to the Treatment of Patients
Seeking Weight Loss Surgery
Call to schedule your
consultation today
303.861.4505


 

You have some nested div’s which is causing the issues because they should be fluid. Judging from the visual design of the top header, you need 3 columns. Right now the container is using a div with a class of “col-md-12” which means it’s a full width container and with your own nested columns (containers). To utilize the bootstrap responsive structure, and to use nested columns, you may want to refer to this:

http://getbootstrap.com/css/#grid

What you are trying to do is a little code intensive because of the changes you need to make, but refer to the bootstrap guide and especially about nested columns.

[Kim LaGrow]

Will do!

[Kim LaGrow]

Is it Andre? I don’t know who I’m talking to! Anyway, I have gone in and changed the code to work within the 12 column grid, and it all looks correct. However, I am still not seeing the mobile menu. I have extra div classes within each of the column classes, although I have tested this by removing and still no menu dropdown in mobile view. Any suggestions?

[Sushil Adhikari]

Correct, this is Andre….Anyway, I still cannot replicate what you are experiencing, so I am not sure what is causing the menu to hide. You mentioned that you removed the things you did in the header, but did you put it back to the original state of the theme?

What I’m seeing is that the menu container is collapsing, so something is definitely creating a conflict somewhere. You have a couple choices here to test this out…

1. Install another test site somewhere, install Circumference, create a menu, then test it in mobile
2. Change from the child theme to the parent theme as the active theme and see what happens

Option two should not delete your theme option settings such as colours etc when you go back to the parent then back to the child theme, but WordPress has done some strange things before.

Question…. your menu is a custom menu you made isn’t it?

[Kim LaGrow]

I’ve put the header back to the original state of the theme (I have created child theme pages for the header and footer.php files), and am not able to see the menu. When I changed the entire site back to Circumference, I was able to see the mobile menu. I’ve gone in and line-by-line tried to figure this one out. :-(. I won’t give up. It’s obviously something I am missing.

[Sushil Adhikari]

OK, so if it works with site back at Circumference, save all your child theme changes somewhere safe (CSS and other code and files). Then reactivate your child theme and see if the mobile menu shows up still. In other words, the parent theme is apparently working for you, then switch back to the child theme, remove your modifications so you have a blank child theme, then see if your menu shows. If so, now slowly begin to redo your modifications and keep checking the menu. Once it collapses and not seen, then you can pinpoint what was conflicting.

[Kim LaGrow]

Got it 🙂
Backed out of everything, uninstalled and reinstalled the child theme, and figured out how to add additional class information to the columns. Thanks again! On to the next challenge.

[Author]

Posts