Client Responsive Header And Navbar Area Is A Little Bit Funny?

[Ken Ng]

Not sure if im the only one that feels that the responsive header and navbar is a little bit funny?

 

The menu button navbar has a huge space on the left. isn't is better that default_title is on the left and menu button on the right instead of having another div on top on navbar? I think removing the above title class. This way is is much cleaner? with visible-xs classes.

 

 

[serge]

can not remember exactly but I think I done some "cleaning" like you did in my custom theme

[Paul]

Does look better, do you have a diff you want to submit for review?

[Michael]

+1 for that looks awesome like Blesta haha

[Ken Ng]

Just feels that the default blesta client theme needed some tweaks and the header is taking too much space. I'm a front end web developer and I will take note of the progress of blesta and will contribute possible when I have the free time with a makeover while still using the color blue and green which is Blesta's primary color.

 

Responsive tables classes from bootstrap must also be removed and instead use before content in css and html5 data-title. This way the table is much cleaner and better on responsive and if you noticed, i've already done that as you can see on the screenshot. This will not affect IE9 on desktop because it will only changes on responsive(But the good news is IE is dead - So we can not going to care about IE are we? )

[serge]

For info, this was what I did in my custom theme, at    SiteShop(dot)ph

 

It was for :

1/ removing the very top blue part with blesta logo

2/ add my responsive logo in place of "My Account"  in the header at left side,etc

 

in structure.pdt file :

		<div class="nav-content">
			<div class="nav">
				<nav class="navbar navbar-default" role="navigation">


					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only"><?php $this->_("AppController.sreader.navigation");?></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>

                                                                           <div class="img-mobile">
                                                                                        <a href="/">
                                                                                        <img style="float: left; margin: 25px 50px 20px 45px;max-width:70%;height:auto;" src="<?php echo $this->view_dir;?>images/logo_header.png" alt="SITEShop . ph"  /></a> 
                                                                            </div>

                                                                      
					</div>

still in structure.pdt

   <div class="header-mobile">   

    						               <ul class="nav navbar-nav">		                                              
                                                              
                                                                                   <li><a href="/"><small>HOME</small></a></li>

                                                                                   <li><a href="#" data-toggle="modal" data-target="#products"><small>PRODUCTS<span class="caret"></span></small></a></li>              
                                            
                                                                                    <li class="dropdown">
                                                                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><small>COMPANY</small></a>
                                                                                                         <ul class="dropdown-menu" role="menu">
                                                                                                                  <li><a href="/about-us"><i class="fa fa-map-marker fa-fw"></i>   About us</a></li>
                                                                                                                  <li><a href="/member/plugin/support_manager/client_tickets/departments/"><i class="fa fa-ticket  fa-fw"></i>   Support Departments</a></li>
                                                                                                         </ul>
                                                                                      </li>            

in style.css file

@media screen and (min-width: 0px) and (max-width: 620px) {
   .mobile-hide{ display: none; };
}


@media screen and (min-width: 0px) and (max-width: 800px) {
.img-mobile {
  max-width: 70%;
    height: auto;
   }
}



@media screen and (min-width: 850px) and (max-width: 1200px) {
.header-mobile .nav > li > a  {
    font-size: 1rem;
     padding: 20px;
       }
}

@media screen and (min-width: 0px) and (max-width: 849px) {
.header-mobile .nav > li > a  {
    font-size: 1rem;
     padding: 9px;
       }
}

[Ken Ng]

It depends on how you want to look on your custom theme, but I think Default client view has to standardize. Whether  we going to remove the title div and place it at the nav area or are we going to move the title div after header or are we going hide the blue header on responsive and appear the logo on nav area on the left.
 
So, 1 or 2 rows on responsive. I prefer one. like here

 

[serge]

I think one line (row) is better, and not certain the tittle like "My Account" serve something, as when you are login you are de-facto in your account, so why lose space with something that serve nothing?  . just my personal view to share with other in case a new "standard" arrive.

[Ken Ng]

Yes 1 or 2 is more acceptable in my opinion. Hopefully Blesta will make changes to the default client theme.

[PauloV]

++1

[eXtremeSHOK]

+++1

[Blesta Addons]

good approuch .

[kpmedia]

I'd want to see it in action, but this does look like an improvement.

Did you ever release the code on this, or are you planning to?