Docs

[kirk74]

Please look at this homepage: http://zookihair.com/wordpress

And click the down arrow .. for a moment it looks fine, then it jumps up, and the heading “flip it flaunt it” is partially obscured.

I have tried completely removing all my CSS, and this still happens.

Thz so much, I will add my login details privately.

[kirk74]

Also, if you click on CONTACT, – it is strange, often the first time it is clicked on it doesn’t position correctly at the top, but then if you click it again then it does.

[kirk74]

This reply has been marked as private.

[kirk74]

and also while you are looking please, I have a menu item ABOUT – which is an anchor link to the start of the homepage content, after the top slider.

This link works EXCEPT – is positions from the adds the bottom arrow from the slider, instead of further down as it should. Again, this is the case even if I remove all my CSS.

(I did bring up some of these navigation issues a while back but they were not quite the same as now and I have changed quite a few things since then so if we can please treat this as a new issue that would be great )

Thx so much

[kirk74]

as I said, these little bugs are happening with and without my CSS, but here is my CSS anyway:
`
body {
line-height: 1.4;
}

p {
margin: 0 0 1em;
}

h6, .h6 {
margin-top: 1em;
margin-bottom:1em;
}

.entry-header, .entry-content {
font-size: 18px;
}

.x-img {
margin-bottom: 0.15em;
}

.x-navbar {
background-color: rgb(229,99,133);}

.x-navbar .desktop .x-nav>.current-menu-item>a>span {
background-color: rgba(255,255,255,.75);
}

.x-navbar .mobile .x-nav li>a {
background-color: rgba(255,255,255,0.5);
}

.x-navbar .desktop .x-nav>li>a>span {
background-color: rgba(255,255,255,.5);
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 2px;
padding-right: 2px;
}

.search-results article {
display: block;
float: left;
margin: 10px;
width: 30%;
}

.search-results .entry-title {
font-size: 110%;
}

.search .entry-header, .entry-content {
font-size: 16px !important;
}

.shop .entry-title{
display: none;
}

.woocommerce div.product .woocommerce-tabs h2 {
display: none;
}

.woocommerce .x-flexslider .x-slides img {
width: 400px;
}

.woocommerce .x-flexslider-shortcode-container {
width: 400px;
float: none;
margin-left:auto;
margin-right:auto;
}

.p-meta {
display: none;
}

.x-brand {
font-size: 24px;
margin-left: 10px;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}

.archive .x-container.offset-bottom {
margin-bottom: 0px !important;
}
.archive .x-container.offset-top {
margin-top: 0px !important;
}

.woocommerce .entry-header.shop {
margin-bottom: 0px;
}

.woocommerce ul.products {
margin: 0px 100px -55px 100px;
}

.woocommerce-result-count {
margin-right:100px;
}

.woocommerce-ordering {
margin-left:100px;
}

.woocommerce li.product .entry-header h3 {
font-size: 110%;
}

.widget_shopping_cart ul li a {
margin-bottom: 25px;
}

#calc_shipping_postcode_field {
display:none !important;
}

.woocommerce #shipping_method label {
display: block;
}

.x-breadcrumbs {
padding-top: 10px;
padding-bottom: 10px;
margin-left:25px
}
.x-breadcrumb-wrap {
min-height:38px;
padding: 0em;
}

.x-topbar .p-info {
margin: 9px 0 0 15px;
}

.x-navbar-inner {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

@media (max-device-width: 600px) and (orientation: portrait) {
#rev_slider_3_1_wrapper {display: none !important;}
.x-slider-container.above {
display:none;
}
}

.x-topbar .x-social-global {
float: right;
margin-right: 15px;
}

.post-type-archive-product .x-container.max {
max-width: 100%;
}

.x-container.width {
width: 100% !important;
}

.x-flexslider .x-slides img {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.search .entry-thumb img {

padding-left: 25%;
padding-right: 25%;
}

.post-type-archive-product .x-container.width {
width: 100% !important;
}

.post-type-archive-product .x-topbar-inner {
max-width: 1200px !important;

}

.post-type-archive-product .x-breadcrumb-wrap {
max-width: 1200px !important;
margin-left: auto;
margin-right: auto;

}

.woocommerce ul.products {
margin: 0px auto -55px auto;

max-width: 75%;
}

form {
margin: 0 auto 1.313em auto;
}

a:focus, select:focus, input[type=”file”]:focus, input[type=”radio”]:focus, input[type=”submit”]:focus, input[type=”checkbox”]:focus {
outline: none !important;
}

.x-brand {
margin-left: 15px !important;
}

ul#menu-main-menu {
margin-right: 15px !important;
}

.woocommerce div.product .summary {
padding-right: 20px;
}

.x-nav-articles {
padding-top: 10px !important;
padding-right: 10px !important;
}

.x-btn-navbar {
margin-top: 12px;
margin-right: 10px;
}

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 85px;
}

Hope that helps

[kirk74]

THANKS! That was a perfect fix for the homepage and for the about link …

Some strange things remain though that have me stumped .. I have inconsistency with anchor links from main menu positioning correctly or not..

It is prob worth pointing out that I have NOT turned on “One Page Navigation” setting in Customiser, because in this site, I have a combination og page to page links and anchor links .. so I have used absolute URLs on the main menu .. (the homepage is long, and has anchor links on it .. eg ABOUT (and the sub-menu items under this) and CONTACT .. But then I have 3 other pages: SHOP , HOW TO CHOOSE, FAQ.)

From all the pages except homepage (HOW TO CHOOSE, SHOP and FAQ) this is how the anchor links work / don;t work… and the strange thing is that I have set them up the same way..
– ABOUT – fine
– How Does it Work, fine
– Why the Flip?, WRONG (fine on the second click though)
– See video WRONG (fine on the second click though)
– CONTACT – WRONG (fine on the second click though)
– send photo – fine

also – when it does go into the right position, it goes to wrong position for a moment and then jumps to correct position. This is not diabolical, as it does arrive in the correct position eventually.. but it is odd, so since I have your expert help it would be awesome to hear what you think about why this is happening and how to fix..

Thanks so much for helping me 🙂

[Lely]

Hi There,

Please do create another menu on Appearance > Menu. Use relative URL for links on the same page on this menu. Then on your homepage settings select this menu under One Page Navigation. Your current menu will still be your Primary menu on Appearance > Menu. So we do have 2 menus, one with relative path, the other with absolute URL. Do let us know how this goes.

[Author]

Posts