Custom Header Layout Issues


I am 100% sure that I have messed this up somehow but I'm trying to make a custom header (my own theme) where the navigation menu is roughly about 80% width and the remaining 20% width are social icons. I am having trouble keeping the icons on the same row for some reason. I have attached an image to give you an idea of what I am trying to do and what is actually happening.

The top section of the image is the mockup created in photoshop (it's what I'm trying to create). The middle section of the image is what it currently looks like in my Upfront Builder "window". The third section is what it looks like from the front end "outside" of the Upfront Builder.

As you can see, the social media icons want to drop down to a new row even though in Upfront Builder they are showing on the same row. In looking at the resultant code there appears to be a clear:both in the css after the navigation. Any idea as to why this might be happening?

Also I seem to be having a lot trouble resizing elements. When I drag them to the width that I want they have a tendency to snap back to the width they were previously or some width in between what I want and what it started out to be. Is there any way to get the elements to snap to the gridlines?

Thanks in advance for your time!

  • Jude

    Hey Anya

    Hope all is well with you and you are having a great week !

    Are you grouping the media icons together ? If yes we'd want to check if the clear:both rule is not applied to the group selector. Also its best if you separate them out as individual elements and then group them with the menu items.

    If this does not work can you delete the menu item and recreate it from scratch please ?

    Also can you enable support access and I can take a look for you ?

    Thank you for being a WPMU DEV member and have a fantastic day !


  • Anya

    Hi Jude,

    Thank you for the super fast response!

    I did have the media icons grouped together. I ungrouped them then grouped them together with the menu items. Unfortunately this did not resolve my issue.

    So I deleted the menu and icons in order to start over from scratch. Now I cannot seem to resize the menu element or the image elements (media icons) by dragging the handles, in order to re-create the top row of the header the way it was previously. It seems to want to stay full width. Is this something where I just need to manually set the widths via css?

    I have activated support access.

    Any help you can provide is greatly appreciated! We really like the concept of Upfront Builder and are trying to assess whether or not it is a good fit for our design style. It seems like it should be so I think the fault lies with me and just learning how to use it properly/to the full.

    To that end if you could point me in the direction of any in-depth tutorials / one on one coaching sessions that are available I would greatly appreciate it!

  • Luís

    Hi Anya ,

    Hope you're doing well today!

    I would like to give a look in your website to check what can be causing that issue. However, I tried to access using Support Access, but I was unable.

    Could you please revoke and after regrant the support staff access again?

    To that end if you could point me in the direction of any in-depth tutorials / one on one coaching sessions that are available I would greatly appreciate it!

    We have a tutorials series in our blog that I think it may interest you:

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.