- This topic has 15 replies, 4 voices, and was last updated 3 years, 1 month ago by Ying.
-
AuthorPosts
-
February 13, 2021 at 11:09 am #1657148WP
Hi,
I’m trying to display Call-to-action button and one additional link in ‘Navigation’ area without enabling Menu(primary). I’ve displayed it with Widgets->Header->Custom HTML, but for additional link, I wanted to generate it dynamically with php. Users should see ‘Employer Panel’ prior logging in and once they login, it should change to Logout. Since html widget does not support php, how could I do it utilizing hook or custom function in child theme without enabling primary or secondary navigation?I’m trying to have below code working through hook.
function rkk_add_auth_links( $items, $args ) { if ( is_user_logged_in() ) { $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>'; } elseif ( !is_user_logged_in() ) { $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In/Register</a></li>'; $items .= '<li><a href="'. site_url('wp-login.php?action=register') .'">Register</a></li>'; $items .= '<li><a href="'. site_url('wp-login.php?action=lostpassword') .'">Lost Password</a></li>'; } return $items; }
February 13, 2021 at 11:37 am #1657173LeoStaffCustomer SupportHi there,
I believe the
generate_menu_bar_items
hook would be what you are looking for:
https://docs.generatepress.com/article/generate_menu_bar_items/February 13, 2021 at 6:21 pm #1657399WPLeo,
I ended up splitting header in two sections based on below technique. On desktop, I wanted to float section-2 items to the right. On mobile view (max-width: 768px), I wanted to display section-1 and section-2 in two rows and also have section-2 items displayed in one row and center aligned. I referenced below resource to achieve it.
https://docs.generatepress.com/article/split-header-three-sections/Here is the html and css. Could you please review css and see if the css requires fixing or better way to achieve this?
<div class="header-section"> <div class="inside-header grid-container section-1"> <div class="site-branding"> <p class="main-title" itemprop="headline"><a href="https://remotted.com/" rel="home">Remotted</a></p> </div> </div> <div class="inside-header grid-container section-2"> <?php if (is_user_logged_in()) { ?> <a class="employer-menu-link" href="https://remotted.com/employer-panel/logout/">Log out</a> <?php } else { ?> <a class="employer-menu-link" href="https://remotted.com/employer-panel/">Employers</a> <?php } ?> <a class="button post-a-job" href="/post-a-job/">Post a Job</a> </div> </div>
css:
.header-section { display: flex; flex-wrap: wrap; background-color: #fff; } .header-section > div { width: calc(100% / 2); } .section-2 { display: flex; flex-direction: row; justify-content: flex-end; } .employer-menu-link, .post-a-job { font-size: 16px; font-weight: bold; margin-left: 40px; } @media (max-width: 768px) { .header-section { margin: 0; padding: 0; flex-direction: column; } .section-2 { padding-top: 0px; } .header-section > div { flex: 1; width: 100%; align-items: center; justify-content: center; } }
February 14, 2021 at 1:28 pm #1658205TomLead DeveloperLead DeveloperThis looks good, but it also looks like something that could be achieved with our regular layout without needing to implement your own header. What was stopping you from using our default navigation with this?
February 14, 2021 at 3:15 pm #1658294WPTom,
I didn’t want to load default navigation and found you already had working solution to achieve this. I created a child theme to preserve custom code.February 15, 2021 at 12:14 pm #1659497TomLead DeveloperLead DeveloperCool, you should be good to go then ๐
March 4, 2021 at 6:51 am #1681948WPHi Tom,
Back to this closed issue – I’m trying to figure out how to have header aligned with rest of the body content on desktop view. If I put width 1200px on header element, it is not working on smaller screens. How could I achieve below? Here is the screenshot of what I’m trying to achieve and on smaller screens everything is ok.
March 4, 2021 at 10:26 am #1682242YingStaffCustomer SupportHi there,
Have you tried give the content container some more left/right paddings?
https://docs.generatepress.com/article/content-padding/Let me know ๐
March 4, 2021 at 12:51 pm #1682410WPThanks Ying,
I wanted to control header with below code and on desktops but not with paddings. I wanted to have header same width as content container. So how do I go about defining header width?
.header-section { display: flex; flex-wrap: wrap; background-color: #fff; } .header-section > div { width: calc(100% / 2); } .section-2 { display: flex; flex-direction: row; justify-content: flex-end; } .employer-menu-link, .post-a-job { font-size: 16px; font-weight: bold; margin-left: 40px; } @media (max-width: 768px) { .header-section { margin: 0; padding: 0; flex-direction: column; } .section-2 { padding-top: 0px; } .header-section > div { flex: 1; width: 100%; align-items: center; justify-content: center; } }
March 4, 2021 at 2:01 pm #1682461YingStaffCustomer SupportSorry I don’t quite understand what you are trying to achieve.
You want the header to be the same width as content container which it is now, so what’s the issue?
March 4, 2021 at 2:13 pm #1682476WPExactly,
I wanted both of them to be the same width. I added following on .header-section and kind of worked. Not sure if this is the right way..header-section { margin-left: auto; margin-right: auto; max-width: 1200px; display: flex; flex-wrap: wrap; background-color: #fff; }
March 4, 2021 at 2:30 pm #1682488YingStaffCustomer SupportYes, your CSS works well.
Another option is to add a CSS class to the site-header:
grid-container
.Then it will keep the header and content container same max width, even you change your container width in customizer in the future.
March 4, 2021 at 2:37 pm #1682493WPBelow is the header html structure. I do have grid-container class there. Did I miss anything?
<header id="masthead" class="site-header header-section" itemtype="https://schema.org/WPHeader" itemscope> <div class="inside-header grid-container section-1"> <div class="site-branding"> <p class="main-title" itemprop="headline"> <a href="#" rel="home">Site Name</a> </p> </div> </div> <div class="inside-header grid-container section-2"> <a class="employer-menu-link" href="#">Find a Job</a> <a class="employer-menu-link" href="#">Dashboard</a> <a class="employer-menu-link" href="#">Log out</a> <a class="button post-a-job" href="#">Post a Job</a> </div> </header>
March 4, 2021 at 2:43 pm #1682501YingStaffCustomer SupportIt should be in the same level as
site-header
, notinside-header
.So this part should be like this:
<header id="masthead" class="site-header header-section grid-container" itemtype="https://schema.org/WPHeader" itemscope>
March 4, 2021 at 9:09 pm #1682716WPThank you!
This looks exactly the way I wanted. -
AuthorPosts
- You must be logged in to reply to this topic.