adding social menus to top right of navigation bar

studiotdesign · February 2021

site - www.ashablake.com

trying to add social icons from bottom footer to also be on top in white.

tried to add in appearance/menus but i am not getting to work

Also, I want to add a little padding to far left of copyright line and far right of social icons in the footer

Phil · February 2021

Hello,

1) If you want to have a social icons on the top too, you can use the Header Builder plugins.

To learn more about this tool, please, check the following links:

https://support.muffingroup.com/documentation/header-builder/

https://support.muffingroup.com/video-tutorials/how-to-build-a-custom-header/

2) To add the padding, you will have to create and use Custom CSS Code, and place it in Betheme -> Theme options -> Custom CSS & JS -> CSS. Do you need help with it?

Thanks

studiotdesign · February 2021

yes, if you can help me with the css to add padding to right and left sides of the footer copyright and social icons and arrow, that would be great

studiotdesign · February 2021

Additionally, I followed your directions about enabling the Header Builder plugin and was able to design the top navigational menu. While my desktop displays it perfectly, the problem I encountered is my laptop. The menu is too long and gets jumbled into 2 lines. Same problem with the social icons. Is there a way to make the menu adjust size? Please advise

studiotdesign · February 2021

I am trying to fix-- looks like I will need css to fix the color of the hamburger menu as well.

studiotdesign · February 2021

I have been playing around with the new header menu I created and I cannot update the colors or sizes of the hamburger menu or social icons. since I enabled the header builder, where do I add the custom css code? Do I do it in betheme options or do I do it under the appearance/theme editor? both do not seem to work for me.

Here is what I want to do:

desktop: Logo (asha blake) on the left, navigation to right, social icons to right of navigation

Laptop: I cannot get navigation menu to fit in space - it stacks on 2 lines -not good! I was hoping that this device would follow the same as the desktop

mobile: logo left, white colored hamburger menu right. When you click on hamburger menu I wanted the background box pink and the text links white. I do not like the blue hamburger menu and I cannot change it. Also size is too large

Phil · March 2021

All your Custom CSS Codes should be placed in Betheme -> Theme options -> Custom CSS & JS -> CSS.

1) Please use the following CSS Code for Footer's copyright section:

#Footer .footer_copy{
   padding: 0 20px!important;
}

2) Your menu stacks in 2 lines because there is too much content in one line. In that case, you should shorten your menu item names and/or decrease the menu's font.

Also, I recommend you turn on the action bar and place your icons there.

3) I noticed that you already have a white hamburger menu. Did you handle it?

Please, try the following CSS Code for the pink background of the mobile menu:

@media screen and (max-width:767px){
   #Header_wrapper .menu{
   background: #e4c8b5!important;
 }
}

Thanks

studiotdesign · March 2021

thank you for your help. Yes I was able to get the hamburger menu working.

Is there a way to have the mobile menu auto close on selection of a menu item? I looked, but could not figure out. If not, is there a way to add a "X" button to close the mobile menu after item selection?

It is looking better thanks

Eric

studiotdesign · March 2021

One more thing:

On the network icons, I am trying to make the pink bar more narrow and keep icons centered. can you let me know the code to adjust height on the pink bar to make more narrow?

studiotdesign · March 2021

network icons--here is a pic

Screen Shot 2021-03-01 at 5.47.46 AM.png

Phil · March 2021

Did you put these icons as images?

If yes, please try to resize them in the item options.

Thanks

Phil · March 2021

Unfortunately, there is no option to close the menu after selecting the menu item or adding an "X" button.

If you would like to achieve that, you will have to modify the theme/Header Builder files. In that case, you should contact your web developer, and he should be able to help you with that.

Best regards

studiotdesign · March 2021

Screen Shot 2021-03-01 at 6.16.10 PM.png

On the network icons, I am trying to make the pink bar more narrow and keep icons centered. can you let me know the code to adjust height on the pink bar to make more narrow?