PupStar Posted October 21, 2016 Share Posted October 21, 2016 I am making the navbar account dropdown a little prettier only I can not seem to centrally align the icon and the links in the dropdown box as seen in the attached image. The code I have is as follows includes/modules/navbar_modules/templates/account.php <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(MODULE_NAVBAR_ACCOUNT_LOGGED_IN, $customer_first_name) : MODULE_NAVBAR_ACCOUNT_LOGGED_OUT; ?></a> <ul class="dropdown-menu"> <li> <div class="navbar-login"> <div class="col-lg-4 login-icon"><p><?php echo MODULE_TEXT_LOGIN_BOX;?></p></div> <div class="col-lg-8"> <p> <?php if (tep_session_is_registered('customer_id')) {?> <ul> <li><?php echo '<a href="' . tep_href_link('account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('account_history.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_HISTORY . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('address_book.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('account_password.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_PASSWORD . '</a>'; ?></li> </ul> <?php }else{ ?> <ul> <?php echo '<li><a href="' . tep_href_link('login.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGIN . '</a></li>'; echo '<li><a href="' . tep_href_link('create_account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_REGISTER . '</a></li>'; ?> </ul> <?php } ?> </p> </div> </div> </li> <li> <div class="navbar-login navbar-login-session"> <div class="col-lg-10"> <p> <ul> <?php if (tep_session_is_registered('customer_id')) { echo '<li><a class="btn btn-danger btn-sm btn-block" role="button" href="' . tep_href_link('logoff.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGOFF . '</a></li>'; }?> </p> </div> </div> </li> </ul> user.css .navbar-login {width: 285px; padding-top: 6px;} .login-icon{ width: 50px; padding-top: 6px; } .login-icon{ width: 50px; } add the following to includes/languages/english/modules/navbar_modules/nb_account.php define('MODULE_TEXT_LOGIN_BOX', '<i class="fa fa-user" style="font-size:87px;color:#c9c9c9;"></i>'); Thanks Mark Link to comment Share on other sites More sharing options...
piernas Posted October 21, 2016 Share Posted October 21, 2016 Do you mean to align the dropdown with the above link on navbar or the content itself? Link to comment Share on other sites More sharing options...
PupStar Posted October 21, 2016 Author Share Posted October 21, 2016 Yes I meant the content of the drop down. I can not seem to manipulate the user icon Link to comment Share on other sites More sharing options...
PupStar Posted October 29, 2016 Author Share Posted October 29, 2016 ok I have got the full screen display looking how I want it. The problem I have now is with the smaller view ports, screenshots attached. Any help would be appreciated. includes/modules/navbar_modules/templates/account.php <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(MODULE_NAVBAR_ACCOUNT_LOGGED_IN, $customer_first_name) : MODULE_NAVBAR_ACCOUNT_LOGGED_OUT; ?></a> <ul class="dropdown-menu"> <li> <div class="navbar-login"> <div class="col-lg-3 login-icon"><?php echo MODULE_TEXT_LOGIN_BOX;?></div> <div class="col-lg-9"> <p> <?php if (tep_session_is_registered('customer_id')) {?> <ul> <li><?php echo '<a href="' . tep_href_link('account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('account_history.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_HISTORY . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('address_book.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li> <li><?php echo '<a href="' . tep_href_link('account_password.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_PASSWORD . '</a>'; ?></li> </ul> <?php }else{ ?> <ul> <?php echo '<li class="login-button"><a class="btn btn-success btn-sm btn-block" role="button" href="' . tep_href_link('login.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGIN . '</a></li>'; echo '<li class="login-button"><a class="btn btn-primary btn-sm btn-block" role="button" href="' . tep_href_link('create_account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_REGISTER . '</a></li>'; ?> </ul> <?php } ?> </p> </div> </div> </li> <li> <div class="navbar-login navbar-login-session"> <div class="col-lg-10"> <p> <ul> <?php if (tep_session_is_registered('customer_id')) { echo '<li><a class="btn btn-danger btn-sm btn-block" role="button" href="' . tep_href_link('logoff.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGOFF . '</a></li>'; }?> </p> </div> </div> </li> </ul> user.css .navbar-login {width: 285px; padding-top: 6px;} ul.login-icon {padding-left: 0px;} li.login-icon {width: 50px;} li.login-button {padding: 4px;} includes/languages/english/modules/navbar_modules/nb_account.php define('MODULE_NAVBAR_ACCOUNT_TITLE', 'Account'); define('MODULE_NAVBAR_ACCOUNT_DESCRIPTION', 'Show Customer Account Actions in Navbar.'); define('MODULE_NAVBAR_ACCOUNT_LOGGED_OUT', '<i class="fa fa-user-circle-o"></i><span class="hidden-sm"> My Profile</span> <span class="caret"></span>'); define('MODULE_NAVBAR_ACCOUNT_LOGGED_IN', '<i class="fa fa-user-circle-o"></i> %s <span class="caret"></span>'); define('MODULE_NAVBAR_ACCOUNT_LOGIN', '<i class="fa fa-sign-in"></i> Sign In'); define('MODULE_NAVBAR_ACCOUNT_LOGOFF', '<i class="fa fa-sign-out"></i> Sign Out'); define('MODULE_NAVBAR_ACCOUNT', '<i class="fa fa-user-circle-o"></i> My Profile'); define('MODULE_NAVBAR_ACCOUNT_HISTORY', '<i class="fa fa-file-text-o"></i> My Orders'); define('MODULE_NAVBAR_ACCOUNT_EDIT', 'My Details'); define('MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK', '<i class="fa fa-address-book-o"></i> My Address Book'); define('MODULE_NAVBAR_ACCOUNT_PASSWORD', '<i class="fa fa-key"></i> My Password'); define('MODULE_NAVBAR_ACCOUNT_REGISTER', '<i class="fa fa-user-plus"></i> Create Profile'); define('MODULE_TEXT_LOGIN_BOX', '<i class="fa fa-user-circle-o" style="padding: 7px;font-size:87px;color:#c9c9c9;"></i>'); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.