Does the theme offer a free plugin for a top nav bar with links?

Thanks for your time!

Thanks for your time! Can you please offer assistance in adding a top nav menu? I’m using a plugin “Top Bar Links”, but to no avail with the menu displaying. Thank you.

Something odd is happening on this home page and I have no idea why! When you try to click on any of the links in the main navigation menu, a message comes up saying “The image could not be loaded” and you remain on the home page.

On any of the other pages, this same navigation menu works perfectly.

I don’t think it has always done this (I’ve been building the site on and off for a couple of months) but I have no idea what’s caused it. I’ve gone round changing settings all over the place to try and solve the problem but I’m now stumped!

Help! Thank you.

Jamie

Hi, I am customizing my test site (WP+storefront+bookshop child theme) and I got taht nice top bar, the reaaly top one with 2 buttons and a HELP Link. Ok, with some CSS I could make those elements (a DIV with 3 SPANS containing buttons and link text) to be responsive.
If you resize the browser screen you′ll see that the buttons and text resize BUI grow vertically, they get taller.

I want to get one of these two thing made;

1- Get the text inside buttons to fit the button width so it do NOT grow in height, keeping the 2 buttons same height
2 or align the 2 buttons and the text centered, vertically, from most text (Get daily…..) top, Gift Card middle, Help text bottom.

Is this possible?

Note!!

The only way I could get the buttons and text Help to align vertically was with this code, BUT at some point when you resize the screen, it “breaks” ths fluid/responsive and get misaligned, then, with small screens looks nice. By aligning this element with the other 2 buttons I get “some” responsivness

/*Align Help link*/
#help{
display:inline-block;
padding-left: 115px;
padding-right: 115px;
}

Thanks in advance

Here the CSS

@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 182px !important;
}
}

/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}

/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header {
display:none;
}

/*Make primary Pages full width*/
body.woocommerce #primary {
width: 100%;
}

/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
display:inline-block;
width:100%;
color: #fe00a1;
border: solid 1px #fe00a1;
}

/*Edited Cart*/
#site-header-cart{
padding-bottom:0px;
width:15%;
}

/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: “\f217”;
}

/*Align Help link*/
/*#help{
display:inline-block;
padding-left: 115px;
padding-right: 115px;
}

/*Align Gift card*/
/*#gift-cardl{
margin:auto;
}*/

/*JoinAngel button style*/
.JoinAngel {
width:auto;
height: 35px;
margin-top: 15px;

}
/*Center collague image*/
.collague_image {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}

/*Add top padding to rectangle*/
#rectangle {
padding:17px;
}

/*Remove Storefront footer credit*/
.site-footer .site-info {
display: none;
}

Thanks in advance for any idea

My environment:
I have WP with woocommerce, storefront+bookshop child theme
I have the Snippets plugins where I add all my PHP code
And I add CSS to Custom CSS within customize

Now the problem:
I can′t figure out how to make site header, top nav bar and logo + buttons responsive.
The fact is that I could get some Top header styling using some PHP and CSS, BUT when I go to mobile view, the Top nav var, header, logo and menu goes crazy!

I need to fix that, I don′t know what to try (I googled a lot, tried changing values, %, float, inline, block, important, wathever) but I can′t get the right tip.

I don{t know if the child theme or storefornt itself is overriding my attemps, maybe i have to unhook some function.

Maybe is just as simple as putting all 3 PHP snippets into one div and many spans tag, but I can′t figure out how, I am burnt today.

I would thank any advice.

Here goes my CSS

/*Remove space between header and Menu*/
.site-header {
height: 135px;
}
.col-full {
top: -84px;
}

/**************************/

/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}

/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}

/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header {
display:none;
}

/*Make primary Pages full width*/
body.woocommerce #primary {
width: 100%;
}

/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
display:inline-block;
width:100%;
color: #fe00a1;
border: solid 1px #fe00a1;
}

/*Edited Cart*/
#site-header-cart{
padding-bottom:20px;
width:15%;
}

/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: “\f217”;
}

/*Align Help link*/
#help{
display:inline-block;
padding-left: 35px;
padding-right: 35px;
}

/*Align Gift card*/
#gift-cardl{
margin-left:80px;
}

/*JoinAngel button style*/
.JoinAngel {
width:auto;
height: 35px;
margin-top: 15px;

}
/*Center collague image*/
.collague_image {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}

/*Add top padding to rectangle*/
#rectangle {
padding:17px;
}

/*Remove Storefront footer credit*/
.site-footer .site-info {
display: none;
}

and here my PHP

add_action( ‘storefront_header’, ‘header_custom_gift_button’, 40 );
function header_custom_gift_button() { ?>
<span>

<button id=”gift-cardl”>Gift Card</button>
</span>
<?php
}

add_action( ‘storefront_header’, ‘header_custom_help_link’, 40 );
function header_custom_help_link() { ?>
<span style=”width:100%;”>
Help
</span>
<?php
}

/////////////////////////////////////////

add_action( ‘storefront_header’, ‘header_custom_subscribe_button’, 40 );
function header_custom_subscribe_button() { ?>

<button class=”subscribe_newsletter_btn”>Get Daily Book Bargains</button>
</span>
<?php
}