Want No margin / padding on the edge of menu bar & footer

[GR8FL]

I want to items on the right side of the menu bar to be flush right with the theme. No padding. No margin. Same goes with the left side. Same goes with the footer. 

Site: http://hattiesgarden.com/

I tried the #4 tip from http://forum-archive.weavertheme.com/discussion/10343/weaver-xtreme-tips-and-tutorial-part-2#Item_1

ul.wvrx-menu {margin-left:0px;}

.is-desktop .menu-alignright {padding-right:0px;}

But it is not flush left or right on the menu bar. And I still need something for the footer.

I believe in Weaver Pro II I had #access.menu_bar div {margin:0px;}. What do I do with Xtreme?

[scrambler]

For the Social icons to the flush right, you need the rule below in the Custom CSS Rule box

.wvrx-menu-right {margin-right:0px;}

The Home menu Item is flush to the left , except for the actual padding on menu items. If you want to remove the left padding on the first menu items but keep overall spacing, add the rule below

@media and (min-width:768px){
.wvrx-menu li:nth-of-type(1) a {padding-left:0;}
}

For the footer you need

.is-desktop #footer-widget-area {padding-left:0;padding-right:0;}
.is-desktop #footer-widget-area .widget-4 {padding-right:0;}

[GR8FL]

The left menu items are still not flush left even after adding the rule you gave me.

[scrambler]

Sorry syntax error on my part

@media only screen and (min-width:768px){
.wvrx-menu li:nth-of-type(1) a {padding-left:0;}
}

[GR8FL]

It’s still not right.

Please see the Weaver Pro Site: http://weaverhattie.littledropup.com/ compared to the Xtreme site: http://hattiesgarden.com/

[scrambler]

The rule appear to be there but is not being applied, and I cannot see why. I have copy pasted the rules from your site in mine and they work fine there, so this is a puzzle.

There is a second rule missing too to get rid of some margin on the menu bar.

To get rid of the margin on the menu bar, add the rule

ul.wvrx-menu {margin-left:0;}

to get rid on the left padding on the home menu, remove the @media rule and try

.is-desktop .wvrx-menu li:nth-of-type(1) a {padding-left:0;}

[GR8FL]

It works.

I have now….

.is-desktop .wvrx-menu li:nth-of-type(1) a {padding-left:0;}
@media only screen and (min-width:768px){.wvrx-menu li:nth-of-type(1) a {padding-left:0;}}
.wvrx-menu-right {margin-right:0px;}
ul.wvrx-menu {margin-left:0;}

[scrambler]

Given the @media rule does not work, I said to remove it.

.is-desktop .wvrx-menu li:nth-of-type(1) a {padding-left:0;}
.wvrx-menu-right {margin-right:0px;}
ul.wvrx-menu {margin-left:0;}

[GR8FL]

Thank you.

[GR8FL]

How do I have the same effect on this site: http://lavenderfieldsde.com/? No margins or padding on footer or menu bar.

[scrambler]

for the footer, start by putting a zero in Main Options > Footer > Footer Area > padding boxes as well as the Footer widget Area padding boxes

For the menu bar add the rules below to the Theme custom CSS Rule box

.is-menu-desktop .menu-alignright {padding-right:0;}
.wvrx-menu-left {margin-left:0;}
.weaverx-plus-search input {max-width:100% !important;}
.is-desktop .wvrx-menu li:last-of-type a {padding-right:0;}

[GR8FL]

perfect!

thank you.

[Author]

Posts