Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro Primary Menu is not linear
Tagged: Altitude Pro Theme Menu
- This topic has 9 replies, 3 voices, and was last updated 8 years, 4 months ago by Porter.
-
AuthorPosts
-
October 31, 2015 at 3:42 pm #169757AGarcia1963Member
My Altitude Pro Theme Primary Menu is not linear and is wrapping around. This never happened before and I am wondering if I did something in the stylesheet.css to cause this. I am a amateur at this and would see if anyone can help....please!
http://www.creatrixwebdesign.comOctober 31, 2015 at 6:45 pm #169759PorterParticipantFrom what I'm seeing, your title area is 100% width, and your nav primary area is 100% width. If you want them to be side by side, try assigning a partial width to each area, by adding widths to the following areas:
.nav-primary { text-align: center; }
And
.header-image .title-area, .header-image .site-header.dark .title-area { padding: 0; }
Try adding 60% to the nav primary area, and 40% to the site-title. by adding:
width: 60%;
Obviously change the value. This will force them to share the area, and simply find values that work well with the width of your image, and navigation. As you add more navigation, you'll take up more space, so you may need to make the text smaller, or change those values to something that gives the navigation more area, like 70 / 30, or 80 / 20.
October 31, 2015 at 9:10 pm #169765AGarcia1963MemberThank you Porter. I tried adding the width of 60%/40% and later 70%/30% and yet it does not work as expected. Here is what I did:
.nav-primary {
text-align: center;
width: 60%;
}and
.header-image .title-area,
.header-image .site-header.dark .title-area {
padding: 0;
width: 40%;
}October 31, 2015 at 9:12 pm #169766AGarcia1963MemberI'd like to add that this problem exists when I maximize the website. It is fine when it is not.
November 1, 2015 at 11:37 am #169800PorterParticipantTake what you have right now (I think you're live editing), and add:
float: left;
and
float: right;
The float left goes on the site-title area, and the float right goes on the primary nav. I just live edited what you had, and that worked. The percents are fine, we just forgot to float the elements.
November 1, 2015 at 2:07 pm #169808Jamaluddin RahmatMemberPlease check Altitude Pro documentation 🙂
November 1, 2015 at 2:07 pm #169810AGarcia1963MemberPorter,
I made the changes you suggested and I am still experiencing the same issue, where my top menu does not work and all the pages in my front page do not appear at all on my laptop. I appreciate you help.
November 2, 2015 at 10:19 am #169875AGarcia1963MemberStill does not work, even after activating the right header widget. It seems like my menu tabs are too wide and causing them to go into the body of the webpages. Looked for ways to change the width and nothing is changing. Still need help....please.
November 2, 2015 at 10:25 am #169877PorterParticipantIt's all about making your logo area float left, adding this works for me right now, I just live-edited it and saw the results working:
.header-image .title-area, .header-image .site-header.dark .title-area { padding: 0; width: 30%; float: left; }
Defining 30% width on its own does nothing, it needs float: left;. Unless I'm misunderstanding your issue, finding the above code (minus the float: left I added), and adding float: left, should fix it. You'll need to space it a bit, and I suggest defining the other width (30 / 70, 40 / 60, whichever), but it works.
EDIT - You must have a 1366 x 738 resolution on your laptop (or at least not 1920 x 1080), as it does break at that size - I'll look into it more.
November 2, 2015 at 10:45 am #169889PorterParticipantHaving the following works perfectly on my 1920x1080 display:
.header-image .title-area, .header-image .site-header.dark .title-area { padding: 0; width: 30%; float: left; }
and
widget-area .header-widget-area { width: 70%; float: right; }
Beyond that, you'll have to adjust your media queries to match this setup throughout your site design. It's quite hard to fit various menu items as you get to lower resolutions, especially on phones, so you may want to look into using smaller font sizes at those viewports, or you may want to add a mobile friendly menu ("hamburger" style, or anything else that works). Digging into the specifics of your various media query sizes isn't that simple, but you should be able to figure it out with the above code. Just check each media query, and guess and check with similar code to the above until you get things working.
This media query is your first issue:
@media only screen and (max-width: 1200px) .site-header .widget-area { width: 580px; }
change that width to 70% (or whatever works), and ensure it floats right, like so:
@media only screen and (max-width: 1200px) .site-header .widget-area { width: 70% float: right; }
That should fix what you see on your screen, as you appear to be loading media query code due to your resolution. Like I said, work your way down, adjust the browser window, and keep checking where you can fix it.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.