How do I get my navigation and header area so the layout is different?

[khedley]

[Note: The title of this post has been edited by a moderator.]

Hi,

The theme I am currently using has the logo and nav bar beside each other, however, i want the nav bar to be underneath the logo and also add some text beside the logo instead. how would I do that without changing the theme?

TIA.

Kaylee

[Adam7 · Accepted solution]

For sites built using the classic Weebly drag and drop website editor, you'd need to edit the theme to do that, @khedley. Are you familiar with HTML and CSS? If so, you can do that by going to the Theme tab and clicking on Edit HTML / CSS.  

For sites built with the Square Online editor, click on the header and then click on Customize - you'll see multiple layouts you can choose from, including one which has the logo on top of the navigation.

[khedley]

Yes I am familiar with that! I kind of figured i'd have to do that, do you know what the code would be for the navigation bar? I can't seem to add any of the right codes in to change it. Maybe i'm adding the right code to the wrong place?

[Adam7]

You'll probably need to edit the page templates and change the HTML there. I'm not sure what if any CSS you'd need to change offhand, although a lot of people use Chrome's Web Inspector on their live site to see what CSS code is doing what.

[Jessichaotic]

I have gone through ALL codes available in the html/css editor. I used weebly a year or two ago and they have completely changed the ability to edit the html/css. Its all coding that redirects to a java script that you are not able to edit. I have been desperately trying to find a way to edit my logo size and it appears to be impossible. All tutorials and help forums show what you would do with the old coding that weebly used to use. This coding is similiar, but as I have said it sends it to a java script that controls the theme that we have no access to because it controls ALL website's theme codes that they host through it. not just mine. that is what I have observed anyway. Can weebly please confirm this so people like me can quit hunting for an answer that just isnt out there? I am fluent with HTML and CSS and what I see is nothing but coding that points to java script.

[Jessichaotic]

the only way to edit a logo is to go through every header's html page and add your own image source. quite frustrating when you should be able to just adjust an html code's image sizing like you used to be able to do

[Webplement]

Weebly has redesigned the edit HTML/CSS area completely, restricting edits that we used to have access to. This platform is going downhill when it comes to customization in the code.

[Adam7]

We haven't removed access to any code that I recall, @Webplement. We also now give access to theme partials which were not available with older themes.

[dinaz]

And yet EVERYONE wants to edit the logo size and change the navigation bar design which we can't do. Squarespace and wix are so much better with their templates.

[Bernadette3]

The logo size restrictions would depend on the theme you are on. What types of design changes are you looking for regarding the navigation menu? 

[shortal]

I would like to be able to change how much room the Menu can take up acorss the page.

[Bernadette3]

Hi @shortal Which website are you trying to edit?

[shortal]

Bernadette,

I am trying to edit http://www.bishopkelleylapeer.org/ 

[shortal]

Bernadette,

  I would like one more page to show in the page menu header and it looks like there is room for that next to the "Bishop Keelley Catholic School" header.

Shortal

[Bernadette3]

If I'm understanding you correctly you want to push the site title over to the left to free up more navigation space? I believe that can be done with some custom coding, but I'm (unfortunately) not the expert to ask. There should be someone in community that can give you some pointers for your website, though!

http://www.bishopkelleylapeer.org/

[cyonce]

I am ALSO having a really hard time adding my logo to the navigation bar. As it stands right now, there is so much white space wasted in that corner. I do not want to change themes for one with a logo in the navigation bar, because it will mess with all the next I already have on my website.

[Adam7]

Are you trying to do that with HTML and CSS customization, @cyonce?