Jump to content
Sign in to follow this  
Dnj1964

Navbar Layout

Recommended Posts

Edge BS4

Is there a way to define the layout of the navbar

 

Current is:

Left justified - Home, Categories and Account

Right justified is Shopping Cart

Big Empty Space in the middle

 

Would like to put the Store Logo and shorten the search query input and add it to the empty space instead of it showing below

Would think this has been asked before, but nothing coming up with any of my searches.

Thanks

Doug

 

Share this post


Link to post
Share on other sites

It's not clear what you are asking, but you can change the basic order of the navbar modules. Look in admin - modules - navbar modules, then edit any one of them. You will see that you can change the order and the position from left to right side.

Edited by Hotclutch
typo

Share this post


Link to post
Share on other sites

@Dnj1964

The Logo and Search modules are part of the Header, not the NavBar. That said, you should be able to copy, edit, and rename the Logo and Search modules from the Header section into the NavBar section. Each module will have three files, the module, the template, and the language file.

Does that make sense?

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites
3 hours ago, ArtcoInc said:

@Dnj1964

The Logo and Search modules are part of the Header, not the NavBar. That said, you should be able to copy, edit, and rename the Logo and Search modules from the Header section into the NavBar section. Each module will have three files, the module, the template, and the language file.

Does that make sense?

M

Thanks for the reply, yes that makes sense. I will have a look at the edits required.

Share this post


Link to post
Share on other sites

Ok so I raped and pillaged @JcMagpie to the best of my ability (which is extremely limited) for his Navbar Categories Code.

I was able to modify this code to move the Store Logo from the header to the Navbar. Positioning isn’t great yet but hopefully will get a handle on it.

Using the same raped and pillaged @JcMagpie Navbar Categories Code I tried to move the Search box from the header to the Navbar as well.

No errors but don’t see where the input box size is defined in languages, modules, or templates.

The search input query box - are you able to define the input box size and if so where is this definition change made

Same as in Product Attributes the box is full width and should also be defined as to size limit somewhere in the code.

html <form> is simple to limit box and textarea sizes.

Php not so much....

Saves on hair cuts, pulling my own hair out, the learning curve is huge!

 

Share this post


Link to post
Share on other sites
29 minutes ago, Dnj1964 said:

Ok so I raped and pillaged

Quote

@JcMagpie

to the best of my ability (which is extremely limited) for his Navbar Categories Code.

 

I was able to modify this code to move the Store Logo from the header to the Navbar. Positioning isn’t great yet but hopefully will get a handle on it.

 

Using the same raped and pillaged

Quote

@JcMagpie

Navbar Categories Code I tried to move the Search box from the header to the Navbar as well.

 

No errors but don’t see where the input box size is defined in languages, modules, or templates.

 

The search input query box - are you able to define the input box size and if so where is this definition change made

 

Same as in Product Attributes the box is full width and should also be defined as to size limit somewhere in the code.

html <form> is simple to limit box and textarea sizes.

Php not so much....

Saves on hair cuts, pulling my own hair out, the learning curve is huge!

 

 

Share this post


Link to post
Share on other sites

Since the theme is bootstrap, most or all inputs have class="form-control", which is width: 100%

you can set a width eg. adding style="width: 5rem", but this is not recommended, there are other ways of controlling the size after considering all views (mobile, tablets, pcs, etc.)

Share this post


Link to post
Share on other sites
25 minutes ago, Hotclutch said:

Since the theme is bootstrap, most or all inputs have class="form-control", which is width: 100%

you can set a width eg. adding style="width: 5rem", but this is not recommended, there are other ways of controlling the size after considering all views (mobile, tablets, pcs, etc.)

Thanks....

doing my best to not revert to the simple solution.

As you allude simple is not usually the best.

Trying to maintain the WC3 validation and effect the changes sought.

Been away from osc since 2.0. ...was simple html changes back then.

Not so much anymore with the 960 grid and the abandonment of simple html.

Taking my time to learn the new code...

Slow but will get the new layout sooner or later.

Trial and error is the best way to learn...

Backup first....

Make changes second....

 

Share this post


Link to post
Share on other sites
1 hour ago, Dnj1964 said:

Using the same raped and pillaged

😂 not required just pm me and I will send you the code.

logo and search are available.

Not made by me this was somthing that @BrockleyJohn did for me some time ago. It was done for BS3 edge so you may need to play with the css to make it work as if I remember correctly the search bar needed tweeks in custom.css to mak the layout work.


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×