Menu full width

dtierney19

Hi,

How can I make the main menu full width? Is there a custom code I can add in the custom.css?

Thanks!

Ninja

dtierney19
Hi
Add this code in /css/custom.css file in template folder.


.t3-mainnav .container {width:100%;}

if there is no custom.css file kindly add it and add the suggested code

Regards

paulus1031

Hi There,

I'd start with making the adjustments in the other thread first and seeing how it looks after that

Cheers
Paul

dtierney19

Ninja It worked wonderfully, but how can I now move the logo & the left topbar to the left and the contact information & the right topbar to the right to align it how it was before?

Ninja

dtierney19
Hi
the topbar is same like it was before, Kindy give me a screenshot how you would like to display it , so i can check this request.

Regards

dtierney19

Ninja

Notice on Screenshot 1 the logo and the tagline above are aligned to the left, and the contact info and social buttons are aligned to the right; however on Screenshot 2 they are more so aligned to the center. I would like it to display like Screenshot 1 when on a larger screen, instead of it looking like Screenshot 2. Thanks!

Ninja

dtierney19
Hi
Add this code in custom.css file

.t3-header .container {width:100%;}
.t3-topbar .container {width:100%;}

Regards

dtierney19

Ninja That's better, but now the slider is a bit messed up. How can I go about fixing this? Here is a Screenshot

Thanks

Ninja

dtierney19
Hi
In your code the topbar width is 95%
.t3-header .container {
width: 95%;
}
To make it like the mainnav you should use it 100%: http://prntscr.com/kqplr3
there is no other way to increase the container width.

Regards

dtierney19

I set it to 100% and if you notice now, the "View Courses" button is nearly below the slider previews. Here is a screenshot. How can this be fixed?

Thanks!

Ninja

dtierney19
Hi
can you check it now and let me know in which device and browser you have this issue.
I checked your site and its showing fine in my notebook : http://prntscr.com/kr4d26

Regards

paulus1031

Can you try adding something like this to adjust the css

@media (min-width:1200px) and (max-width:1500px) {
.slideshow .slider-content-inner h1 {font-size: 30px;margin-top: 8px;}
body .slideshow .slider-content-inner {max-width: 50%;}
.slideshow .label-small {padding-top:12px;}
}

You may well need to tweak the values as needed to be a little more precise depending on your design idea

dtierney19

Ninja It seems to be working fine now. Thank you so much for your help!