Hello,
I’m creating the site with a child theme of Flexform.
I’m trying to make it so the Menu, Top Bar and Mini Header are truly positioned at full width. So that the logo and social icons on the left are always positioned 20px from the left of the browser AND the menu and top bar menu is always positioned 20px from the right side of the browser from it’s right side. Currently the “full width” setting in the theme options still boxes it in at a set amount of pixels. This isn’t “full width”. So when the browser is scaled over 1200px the right and left sides stop positioning to the side of the browser and become “boxed”. (Images attached)
Also, when the browser is scaled between 768px and 979px all these elements are bunched up and messy. (images attached) Not at all uniform to other browser sizes. Granted, these sizes are not standard but are used on higher end Windows phones and true responsiveness should cover these sizes. Past 768px it kicks to mobile sizing.
Also also, when it is kicked to mobile size the right side of the Top Bar, the “account” button is removed and an enormous space is created at the top of the page. (images attached) How is someone supposed to access account sign-in on mobile device when this happens?
Ok, so, I’ve tried my hand at adjusting these issues with my own custom CSS applied to the child theme. I’m running into different problems but able to adjust the logo and menu initially. I must first say I’m not an expert at CSS. I can read and understand it but run into problems on how to place it in the right spots to effect the things I want it to effect. I’m able to get the Logo and Menu to behave the way I want out side of 980px. But under that it breaks down like aforementioned browser sizing issue.(Images attached) The other problem, a BIG ONE, is the position of the “Account” button. I CANNOT get it to position right like the main nav menu. And then, when the browser is sized to mobile size it gets even more messy. The Top Bar disappears, the mobile nav goes over the Logo and the menu is transparent and layers over the content instead of pushing it down or creating a different mobile menu. (images attached) I know, or believe, part of this is because of the absolute position I’m putting on the menu and logo and the main content area. How can I get this to respond correctly?
And finally, how can I get the Mini Header to be position the same way as the main logo and menu nav? Currently is “boxed” in set amount of pixels.
As I’m finishing typing this, I’m realizing the content does the same thing. It doesn’t truly span “full width” like the revolution slider. How can I accomplish this?
In a Zip file I’ve attached images and custom CSS text file, which needs a lot of work!
Any help is much appreciated!
Thank you!
.