Forum Replies Created
-
Posts
-
Awesome, thank you! Is there any way to adjust the outside margins of that header menu bar, so there isn’t a gap between the outside edges of the boxed content and the menu items?
Yes that was intentional; when we updated from 2.4 it increased the width of our boxed content, which then messed up a lot of our page layouts. Is there anyway to redo the menu spacing in the current theme while keeping the boxed content to max 1030px? Replacing the menu selector also didn’t do anything.
We have it in the quick css on the general styling page of the theme settings. Here’s what we have if it helps:
div#header_main_alternate .container { width: 100%; margin: 0; } @media only screen and (min-width: 1140px) { .av-main-nav > li > a { padding: 0 28.7px; }} @media only screen and (max-width: 1139px) and (min-width: 1010px) { .av-main-nav > li > a { padding: 0 30px; }} @media only screen and (max-width: 990px) { .av-main-nav > li > a { padding: 0 0px; }}Ah sorry, bad wording. I put the alt tags in wordpress (no plugin) but our source code and moz analytics say they don’t exist. From what I could find it looked like something that had to be changed in the theme’s header.php file?
Thanks!
That brought the search button down, but now it’s just awkwardly perched on the top left of the search bar.
I added:
float: right;That got it in line with the search bar, but there’s a sizable gap between the search bar and the button. Any way to close that?
Ok, it’s been awhile, but now we’ve added an item so now it needs to be 7 equally spaced menu items and I can’t seem to get this right:
div#header_main_alternate .container { width: 100%; margin: 0; } @media only screen and (min-width: 1140px) { .av-main-nav > li > a { padding: 0 20px; }} @media only screen and (max-width: 1139px) and (min-width: 1010px) { .av-main-nav > li > a { padding: 0 20px; }} @media only screen and (max-width: 990px) { .av-main-nav > li > a { padding: 0 0px; }}This is as close as I’ve been able to get it, but the margins in the navigation area are still there. Help?
I added unique section ids but I don’t see how that comes into the CSS. What you put up there is the exact same as I had that doesn’t work… The 3 sections that’ll need this I just named 1, 2 and 3. Here’s what I have:
@media only screen and (max-width: 767px) { #av_section_1 #av_section_2 #av_section_3 .avia-button, #av_section_1 #av_section_2 #av_section_3 .avia-button-wrap { display: inline-block; float: none !important; left: 50%; position: relative; transform: translate(-50%); } }I’m just trying to figure out how to assign the CSS to the correct properties; that’s the part that seems to be screwing everything up.
Ah ok, it’s not working because I tried to make it applicable to all pages, not just the home page (we have a top section like this on every main page). Here’s what I have:
@media only screen and (max-width: 767px) { #av_section .avia-button, #av_section .avia-button-wrap { display: inline-block; float: none !important; left: 50%; position: relative; transform: translate(-50%); } }So this works on a desktop if you shrink the window, but when i viewed it on a phone the buttons were so far off to the right that you couldn’t click on them.
and thank you for helping!
Flushed the cache 5 times, don’t have any minifying settings…and still square! I’m starting to think the internet gods don’t want us to have round buttons…
Hi Devin,
Thanks, but that’s not quite what we’re looking for. We’re wanting specifically the mobile layout of the tab field, but to have it on all size layouts. I would imagine it’s a matter of setting the CSS to display that layout on a larger minimum window, but I don’t know exactly how to do that…
