- This topic has 4 replies, 2 voices, and was last updated 6 years, 2 months ago by Liquid_Squelch.
- AuthorPosts
- April 6, 2018 at 9:22 am #5112Liquid_SquelchParticipant
Hi,
I would like to move my main navigation links to a new line below the main header image.I can see from the CSS that the main header is 30% and the links are 70% . I tried to change each and then both to 100%, but that did not push the header navigation links into their own line.
I would like to have the links use the same background color as the existing header block.
Thanks
And is this something that the premium total theme can do out of the box?
April 9, 2018 at 9:06 pm #5150HashKeymasterChanging the width to 100% should have worked. If you can show us your website with code added, we can find the issue. But currently we will not be able to give you the exact solution until checking your website.
And if you are interested in buying the pro version then yes the pro theme has multiple header style with some header style having menu in separate new line.
April 11, 2018 at 12:48 am #5177Liquid_SquelchParticipantChanging which width to 100% would have worked? Changing the Header Image, or the links?
I can’t change the code and leave it since this is a live siteThe URL is http://www.scannerschool.com
I’ve been playing with the changes by using FireFox’s Development interface, so I can make live changes and see what happens to the display.
Thanks
April 11, 2018 at 8:56 pm #5180HashKeymasterOn checking your website, i did not find the width 100% assigned to logo and navigation.
April 16, 2018 at 6:02 am #5254Liquid_SquelchParticipantI cannot set the width and leave it for you to check because this is a live website. If I make the changes, then the navigation is invisible.
Here are two snapshots so you can see what is going on.
This is the theme default of 30% x 70%
And this is what happens if I modify the CSS to make the image and navigation width 100%. I highlighted a menu option so you can see where it dropped to on the page.
Here is the code that I used to make the changes.
#ht-site-branding { width: 100%; } #ht-site-navigation { width: 100%; }
After playing with the CSS a little more, I can get close – but not quite.
There is a white bar between the two sections that I cannot remove. The Logo is still floating left and the links are still floating right – even though I tried to float them center. And the links are not full width. They seem to be stuck in in the main body width.#ht-site-branding { align-content:center; width: 100%; } #ht-site-navigation { align-content: center; width: 100%; padding: 1px; background: #3b653d;}
- AuthorPosts
- You must be logged in to reply to this topic.