adding social menus to top right of navigation bar

studiotdesign

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

studiotdesign

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

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

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

studiotdesign

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

studiotdesign

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

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

network icons--here is a pic

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

Phil

Did you put these icons as images?

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

studiotdesign

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?

Phil

Can you send me a screenshot showing how did you create this bar, please?

What items were used, and settings.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

studiotdesign

Here are screenshots let me know if you receive

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

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

Screen Shot 2021-03-02 at 5.53.05 AM.png

Screen Shot 2021-03-02 at 5.53.13 AM.png

Screen Shot 2021-03-02 at 5.53.22 AM.png

Screen Shot 2021-03-02 at 5.53.30 AM.png

Screen Shot 2021-03-02 at 5.53.40 AM.png

Phil

Please edit these images in some graphic program, remove the blank space above and below them, and replace them.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next