I am building my first wordpress powered site. I have created my own child theme for this and have been editing through this(original is the default 2012 theme)
However in chrome the first time you visit the site the menu sometimes breaks and doesn’t sit inline with the header logo.
Also when the page is resized i make the menu sit as a block element to spread across the page underneath this logo, Then it switches to a button which on click rolls out the menu sorted in a list.
However when you then resize this back to full screen the same thing happens. The menu is pushed into the underneath container.
This ONLY happens in chrome and i can’t work out what is wrong for the life of me.
The code for the menu and the resized menu is
.main-navigation {
margin-top: 50px;
width:56%;
margin-right:25px;
margin-right:1.785714285714286rem;
display:inline;
float:right;
}
and on the resize event(the one which breaks it in chrome)
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
width:100%;
text-align: center;
display:block;
}
The site url is : www.electricanwoking.com
if anyone has had any experience with this problem any help or pointers would be really appreciated !
