Flexform Menu/Topbar/Mini Header Positioning and Responsiveness with Custom CSS

[KerplunkDesign]

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!

[Kyle – SUPPORT]

Hi

Add this to your custom css:

#top-bar > .container {
  width: 100%;
}

Let me know if this works and if there are any remaining changes you would like to make

– Kyle

[KerplunkDesign]

Thank You! Yes that helped! But now I’m changing back to the standard layout. I’d like to modify the placement of the social icons.

I’ve got a negative top margin for the logo to get it closer to the browser on the left side to align with the member login button on the right.

How do I get the social icons to “butt” up against the member login button on the top bar?

I’ve attached a photoshoped header screen grab to show what I want to accomplish.

Thanks you!

[Kyle – SUPPORT]

Ok no problem

Add this to your custom css:

#nav-section {
  margin-top: 0;
}

– Kyle

[KerplunkDesign]

That does not solve this question:

How do I get the social icons to “butt” up against the member login button on the top bar?…

see attached file for my goal. the image is faked, it what I want the code to accomplish.

thank you.

[Kyle – SUPPORT]

You can add this custom css:

#nav-section {
  margin-top: -40px;
}

but not sure why you would want it like this?

– Kyle

[KerplunkDesign]

Because it looks better.
This is still not working. I’m not a super great coder, but what does #nav-section have to do to with top-bar social icon placement?

[Kyle – SUPPORT]

Apologies, I misunderstood the question.

You can’t have the social icons on the same side as the login, this would have to be custom coded and I’m afraid that is beyond our scope of support

– Kyle

[KerplunkDesign]

This can’t be done with a line of custom css?
Any hint on where to change this?
Let me make this a request for future updates.
Thanks for your help.

[Kyle – SUPPORT]

You can try to do it yourself by editing sf-header.php

– Kyle

[vilcana]

Hello,

I’m trying to select a menu for top bar, but the theme select exactly the menu in the main menu. I installed a plugin to create two levels (pubblic and members menu). This plugin is MenuPerPages, can you halp me please.

Thanks
Vilma

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

@vilcana – please create a new topic.
Thanks 🙂
With Best Regards
Mohammad